/* ==========================================================================
   Design tokens - the single place colour, type and spacing are defined.
   Every other stylesheet references these by role, never by raw hex.

   The three mark colours (accent / gain / loss) were validated as a set
   against both surfaces below:
     node scripts/validate_palette.js "#3987e5,#00a37a,#d03b3b" \
          --mode dark --surface "#16191d" --pairs all
   Gain is a teal-leaning green on purpose: plain green vs red measures
   only dE 4.1 under deuteranopia, this pair measures 8.6 and still reads
   as "green up / red down". Tritan separation is still low, so every
   delta in the UI carries a +/- sign and an arrow as well - colour is
   never the only cue.
   ========================================================================== */

:root {
  /* --- surfaces, darkest to lightest --- */
  --plane:            #0d0f12;   /* page behind the panels */
  --surface-1:        #16191d;   /* panel body */
  --surface-2:        #1c2025;   /* panel header, table head, toolbar */
  --surface-3:        #23282e;   /* row hover, pressed state */
  --surface-input:    #101317;

  /* --- hairlines --- */
  --border:           rgba(255, 255, 255, .09);
  --border-strong:    #2c3239;
  --grid:             #23282a;   /* chart gridline */
  --baseline:         #383c42;   /* chart axis */

  /* --- ink --- */
  --ink-1:            #e8eaed;   /* primary */
  --ink-2:            #a8adb5;   /* secondary */
  --ink-3:            #6f757e;   /* muted: axis ticks, column labels */

  /* --- marks & state (reserved, never reused as decoration) --- */
  --accent:           #3987e5;
  --accent-hover:     #4f95e9;
  --accent-ink:       #ffffff;
  --gain:             #00a37a;
  --loss:             #d03b3b;
  --warning:          #fab219;

  /* tinted washes for row flashes and buy/sell buttons */
  --gain-wash:        rgba(0, 163, 122, .14);
  --loss-wash:        rgba(208, 59, 59, .14);
  --accent-wash:      rgba(57, 135, 229, .14);

  /* --- type: system sans throughout, no display face --- */
  --font: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --fs-micro:         11px;   /* column headers, badges */
  --fs-small:         12px;
  --fs-base:          13px;   /* grid rows - terminals run dense */
  --fs-body:          14px;
  --fs-lg:            16px;
  --fs-xl:            22px;
  --fs-hero:          30px;   /* stat tile values */
  --fs-display:       36px;   /* landing headline */

  /* --- spacing --- */
  --sp-1: 2px;
  --sp-2: 4px;
  --sp-3: 6px;
  --sp-4: 8px;
  --sp-5: 12px;
  --sp-6: 16px;
  --sp-7: 24px;

  /* --- geometry --- */
  --radius:           2px;     /* terminals are square; just enough to soften */
  --radius-lg:        3px;
  /* geometry tracks the type scale - bumping font size without these
     leaves the rows cramped and the side panes wrapping */
  --row-h:            30px;    /* grid row height */
  --topbar-h:         48px;
  --statusbar-h:      26px;
  --rail-w:           248px;   /* watchlist */
  --ticket-w:         280px;   /* order ticket */
}