/*
  Bullstrike Capital — design tokens.

  Transcribed from the brand guidelines (BULLSTRIKE.pdf, 2026). Every value here
  comes from that document; nothing is invented. If a token is missing, it is
  missing from the guidelines too and should be added there first.

  The register is deliberately severe. This surface shows a client the money
  they have made and lost, so it is built like a statement of account rather
  than a product page: flat planes, hairline rules, no shadows, no gradients
  except the one the brand itself specifies, and gold used as punctuation
  rather than decoration.
*/

/* ── Typeface ────────────────────────────────────────────────────────────
   Manrope, self-hosted. The CSP is default-src 'self', so a CDN font would be
   blocked outright — and would additionally disclose every client's IP and
   page visit to a third party on each load. */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;          /* variable: Light 300 … ExtraBold 800 */
  font-display: swap;
  src: url('fonts/manrope-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
                 U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122,
                 U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('fonts/manrope-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
                 U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF,
                 U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

:root {
  /* ── Primary ─────────────────────────────────────────────────────── */
  --bs-white:        #FFFFFF;
  --bs-dark:         #3A3A3A;

  /* The brand's gold is a GRADIENT, #D4B36A → #6E4E1F, not a flat colour.
     Flat stops are provided for text and hairlines, where a gradient cannot
     apply and would only be faked badly. */
  --bs-gold:         #D4B36A;    /* light stop — text, rules, active states */
  --bs-gold-deep:    #6E4E1F;    /* dark stop  — gradient terminus only */
  --bs-gold-ink:     #B99A55;    /* gold darkened for use ON light surfaces */
  --bs-gold-grad:    linear-gradient(90deg, #6E4E1F 0%, #D4B36A 100%);

  /* ── Grayscale (guidelines p.14) ──────────────────────────────────── */
  --bs-cloud:        #EDEFF7;
  --bs-smoke:        #D3D6E0;
  --bs-steel:        #BCBFCC;
  --bs-space:        #9DA2B3;
  --bs-graphite:     #6E7180;
  --bs-arsenic:      #40424D;
  --bs-phantom:      #1E1E24;
  --bs-black:        #000000;

  /* ── Surfaces ─────────────────────────────────────────────────────── */
  --surface-base:    var(--bs-phantom);
  --surface-raised:  #24242B;    /* Phantom, one step up — panels */
  --surface-sunken:  #17171C;    /* Phantom, one step down — table heads */
  --surface-line:    #2E2F38;    /* hairline; Arsenic at low contrast */
  --surface-line-hi: var(--bs-arsenic);

  /* ── Ink ──────────────────────────────────────────────────────────── */
  --ink-primary:     var(--bs-white);
  --ink-secondary:   var(--bs-steel);
  --ink-muted:       var(--bs-space);
  /* NOT Graphite (#6E7180). Measured against the raised surface it scores 3.18:1,
     below the 4.5:1 WCAG AA floor for body text, and this tone carries
     timestamps, entry prices, commission and swap — figures a client is
     entitled to read. #8C90A0 sits between Graphite and Space on the brand's
     own ramp and measures 4.85:1. Graphite remains correct for large display
     type, where the 3:1 threshold applies. */
  --ink-faint:       #8C90A0;

  /* ── Semantic ─────────────────────────────────────────────────────────
     The brand defines no profit/loss pair, so these are chosen to sit beside
     gold without competing with it: desaturated, closer to a terminal than to
     a consumer app. Gold is reserved for the brand — never for "up". */
  --state-up:        #5CBA79;   /* 6.43:1 on the raised surface */

  /* The most important contrast on the whole surface, and the one that was
     wrong first: at #C4574C a loss measured 3.53:1 — below AA — so the figures
     a client most needs to read were the least legible on the page. #E0776B
     measures 5.15:1 and stays within the warm register the brand sits in. */
  --state-down:      #E0776B;
  --state-warn:      var(--bs-gold);

  /* ── Type scale (guidelines p.17) ─────────────────────────────────── */
  --t-h1:   64px;
  --t-h2:   48px;
  --t-sub1: 32px;
  --t-sub2: 24px;
  --t-p1:   18px;
  --t-p2:   16px;
  --t-micro: 11px;   /* labels and legends; below the published scale */

  --font-sans: 'Manrope', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* Figures are tabular so columns of money align on the decimal. Manrope has
     no separate mono cut, so the numeric feature is used instead of switching
     family — which keeps the brand typeface on every figure. */
  --font-num: 'Manrope', ui-sans-serif, system-ui, sans-serif;

  /* ── Geometry ─────────────────────────────────────────────────────────
     2px, near-square. The guidelines round cards generously for print
     presentation, but a dense financial table reads as a ledger, and a ledger
     does not have soft corners. */
  --radius:      2px;
  --radius-lg:   3px;

  /* 8px base. Every margin and padding is a multiple. */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;
}

/* ── Reset ──────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-base);
  color: var(--ink-primary);
  font-family: var(--font-sans);
  font-size: var(--t-p2);
  font-weight: 400;
  line-height: 1.45;
  /* Tabular figures everywhere by default: this is a document of numbers. */
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1, 'ss01' 1;
  -webkit-font-smoothing: antialiased;
}

/* ── Shared primitives ──────────────────────────────────────────────── */

/* A label. Uppercase, wide-tracked, small — the register of a form field on a
   statement, not a heading. */
.label {
  font-size: var(--t-micro);
  font-weight: 600;
  letter-spacing: 0.10em;
  text-transform: uppercase;
  color: var(--ink-muted);
}

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }

.up   { color: var(--state-up); }
.down { color: var(--state-down); }
.muted { color: var(--ink-muted); }
.faint { color: var(--ink-faint); }

/* The gold rule under the bull in the logo, reused as a structural device. */
.rule-gold {
  height: 2px;
  border: 0;
  background: var(--bs-gold-grad);
}

::selection { background: var(--bs-gold); color: var(--bs-phantom); }

/* Focus is visible and gold. Keyboard users must never have to guess where
   they are on a surface that moves money into view. */
:focus-visible {
  outline: 2px solid var(--bs-gold);
  outline-offset: 2px;
}

/* Respect a user's motion preference — vestibular disorders are not rare, and
   nothing here needs to move. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}