/* ============================================================================
   GMI 0.25 — tokens. The ONLY place a colour, size or spacing value is defined.
   If you are about to write a hex code anywhere else, stop: put it here.

   Settled 2026-08-08. See docs/BRAND-GUARAGUAO.md §8.
   ========================================================================== */

:root{
  /* ── neutrals. Cool, deliberately. The operator chose this ground over a
        warm one after seeing both in real UI. ─────────────────────────────── */
  --bg:        #0B0F14;   /* the page */
  --panel:     #10151C;   /* expanded rows, tab bar */
  --panel-2:   #141B24;   /* chart wells, inputs, table headers */
  --rule:      #242C38;   /* structural hairlines */
  --rule-2:    #1B222C;   /* between rows */

  --ink:       #E6EDF3;   /* primary text */
  --mute:      #8B949E;   /* why-lines, secondary */
  --dim:       #6B7683;   /* field labels, timestamps */

  /* ── semantics. These MEAN something. Never used decoratively. ─────────── */
  --up:        #3FB950;   /* gain, safe, GMI acting */
  --caution:   #E3B341;   /* needs attention, not yet wrong */
  --down:      #F85149;   /* loss, risk, destructive */
  --accent:    #5B9CFF;   /* GMI's intent, links, focus */
  --swing:     #C9A2F0;   /* the swing badge, and LEARNED entries */

  /* ── ink that sits ON a semantic fill ──────────────────────────────────── */
  --on-fill:   #0B0F14;

  /* ── translucent washes. Derived from the semantics above so they can never
        drift out of step with them. ───────────────────────────────────────── */
  --up-wash:      rgba(63,185,80,.10);
  --up-edge:      rgba(63,185,80,.45);
  --caution-wash: rgba(227,179,65,.10);
  --caution-edge: rgba(227,179,65,.45);
  --down-wash:    rgba(248,81,73,.14);
  --down-edge:    rgba(248,81,73,.48);
  --accent-wash:  rgba(91,156,255,.09);
  --accent-edge:  rgba(91,156,255,.45);
  --swing-wash:   rgba(201,162,240,.09);
  --swing-edge:   rgba(201,162,240,.45);

  /* ── layout ────────────────────────────────────────────────────────────── */
  --pad:       1rem;      /* the page gutter. Every row aligns to this. */
  --caret-col: 14px;      /* the disclosure caret column */
  --indent:    calc(var(--pad) + var(--caret-col) + .5rem);  /* facts + why align here */
  --radius:    6px;
  --radius-lg: 10px;

  /* Fixed columns inside a row's identity area. Without these the badges start
     wherever the ticker happens to end, so a 2-letter name and a 4-letter name
     put their first pill at different x and the column reads as ragged. The
     operator spotted it; these two values are the fix.

       --sym-col   a FALLBACK only. Each list overrides it inline with the
                   measured width of the longest ticker it actually contains,
                   so short names do not leave a worst-case gap before the
                   first pill. See UI.symColStyle(). This default is what a
                   list falls back to if it has nothing to measure.
       --badge-col EVERY pill is exactly this wide — not a minimum, a width

     --badge-col is sized for a 7-character label at --t-badge, with headroom,
     because SF Pro on iOS, Roboto on Android and Segoe UI on Windows do not
     agree on uppercase advance widths and the pill must not overflow on any of
     them. check-render.js enforces the 7-character cap. */
  --sym-col:   3.7rem;
  --badge-col: 4.1rem;

  /* ── type. A scale, not ad-hoc sizes. ──────────────────────────────────── */
  --t-hero:    1.22rem;   /* the equity figure in the rail */
  --t-lead:    1rem;      /* sheet titles */
  --t-sym:     .95rem;    /* a ticker */
  --t-body:    .86rem;    /* general text */
  --t-fact:    .79rem;    /* a fact value */
  --t-why:     .76rem;    /* the why-line */
  --t-label:   .62rem;    /* section headers */
  --t-key:     .55rem;    /* a fact's label */
  --t-badge:   .58rem;    /* state badges */

  --w-reg:  400;
  --w-med:  550;
  --w-semi: 650;
  --w-bold: 700;

  --track-label: .075em;  /* letter-spacing on uppercase labels */

  /* ── the mark. Chrome uses a brightness lift because the artwork is dark
        navy and vanishes below 32px on this ground. Measured, not guessed —
        see brand/generated/LIFT-LADDER.png. ──────────────────────────────── */
  --mark-size:  24px;
  --mark-lift:  brightness(1.65);
}

/* One theme, deliberately. The app is dark; there is no light variant to drift
   out of sync with. Do not add a prefers-color-scheme block here. */

*, *::before, *::after{ box-sizing:border-box }

html{ background:var(--bg) }

body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  /* every digit the same width, so columns of numbers line up everywhere */
  font-variant-numeric:tabular-nums lining-nums;
  /* the app never scrolls sideways; wide content scrolls inside its own box */
  overflow-x:hidden;
  -webkit-tap-highlight-color:transparent;
}

button{ font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer }

:focus-visible{ outline:2px solid var(--accent); outline-offset:2px; border-radius:3px }

@media (prefers-reduced-motion:reduce){
  *{ transition:none !important; animation:none !important }
}