/* ============================================================
   GEXStream design tokens — single source of truth.
   Load FIRST in every HTML head, before index.css:
     <link rel="stylesheet" href="/css/tokens.css?v={{VERSION}}">
   JS components read the same values from uiTokens.js (GXT global).
   Rule: no hardcoded hex/px in components or stylesheets — only
   var(--*) here or GXT.* in JS. (Standalone SVG icon files exempt.)
   ============================================================ */
:root {
    /* ---- brand ---- */
    --gold: #B8860B;              /* fills, borders, active states (bg use) */
    --gold-text: #D4A742;         /* gold as TEXT on panels — 6.2:1 on surface-2 */
    --gold-soft: rgba(184, 134, 11, 0.15);  /* selected-row / hover washes */

    /* ---- surfaces (one warm ramp; the blue-grays are retired) ---- */
    --surface-0: #1a1a1a;         /* page background */
    --surface-1: #252525;         /* inset wells, input backgrounds */
    --surface-2: #2d2d2d;         /* panels, cards, modals */
    --surface-3: #3a3a3a;         /* hover rows, raised chips */

    /* ---- borders ---- */
    --border-1: #3a3a3a;          /* hairlines, dividers */
    --border-2: #4a4a4a;          /* control outlines */

    /* ---- text ---- */
    --text-1: #f2f2f2;            /* primary */
    --text-2: #b8b8b8;            /* secondary */
    --text-3: #9a9a9a;            /* tertiary/labels — 4.9:1 on surface-2 (min for text) */
    --text-disabled: #6f6f6f;     /* disabled ONLY, never information */

    /* ---- semantic (exactly one green, one red) ---- */
    --positive: #22c55e;          /* fills, badges, icons */
    --positive-text: #34d399;     /* small green text — 7.2:1 on surface-2 */
    --negative: #ef4444;          /* fills, badges, icons */
    --negative-text: #f87171;     /* small red text — 5.0:1 on surface-2 */
    --warn-text: var(--gold-text);/* z-score "stretched", neutral AI signal */

    /* ---- charts ---- */
    --chart-up: #4AA87D;          /* equal perceived lightness pair (OKLCH L≈0.65) */
    --chart-down: #D66358;
    --chart-price: #E2E8F0;
    --chart-ref: #8a8a8a;         /* reference/HV lines, dotted */
    /* categorical series palette — assign to series ONCE, globally,
       in this order; never two from the same family on one chart.
       Owner-muted from the audit values (~18% darker, same hues). */
    --chart-cat-1: #AE8936;       /* gold      — Net GEX */
    --chart-cat-2: #508ABC;       /* blue      — Net IV / IV Ratio */
    --chart-cat-3: #4E9D82;       /* teal      — Net Flow / Flow Ratio */
    --chart-cat-4: #A36799;       /* magenta   — Net DEX */
    --chart-cat-5: #B8744A;       /* orange    — Net CEX */
    --chart-cat-6: #8173D1;       /* violet    — Net VEX */
    --chart-cat-7: #8B974B;       /* olive     — vGEX */
    --chart-cat-8: #68A0B8;       /* sky       — Call Vol */
    --chart-cat-9: #B85C73;       /* rose      — Put Vol */
    --chart-cat-10: #907657;      /* tan       — Total OI */

    /* ---- typography ---- */
    --font-ui: system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    /* six-step scale. 11px is the FLOOR — nothing renders smaller. */
    --text-xs: 11px;              /* replaces every 9px / 10px / 0.62rem */
    --text-sm: 12px;              /* replaces 12.45px and 0.7rem */
    --text-base: 13px;
    --text-md: 15px;
    --text-lg: 18px;
    --text-xl: 24px;

    /* ---- layout ---- */
    --header-h: 36px;                     /* real fixed nav height (desktop; ≤768px stacks and stays auto) */
    --header-offset: calc(100vh - 64px);  /* 4px pt-1 + 36px header + 12px mb-3 gap = 52px top, + 12px bottom slack */
    --radius-1: 4px;
    --radius-2: 6px;
    --radius-3: 8px;
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 24px;
}

/* Numerals: fixed-width everywhere so ticking values don't dance
   and table columns self-align. */
body {
    font-variant-numeric: tabular-nums;
    font-family: var(--font-ui);
}

/* Keyboard focus — visible on every interactive element. */
:focus-visible {
    outline: 2px solid var(--gold);
    outline-offset: 2px;
    border-radius: 2px;
}