/* Design tokens: every styling value style.css uses (color, spacing,
   border width/style, radius, font family/size/weight/letter-spacing,
   transitions, z-index) as :root custom properties. This is the single
   source of truth for the LIGHT theme (the default) — style.css should
   contain zero literal values of any kind, only var(--...) references
   into this file.

   Absorbs the old colors.css entirely (same --color-* names it used, so
   nothing downstream needed renaming) rather than keeping two parallel
   color-definition files — colors.css only ever held color tokens, and
   every other kind of token belongs in the same file for the same reason
   (one place to look, one place a new theme overrides). See dark.css for
   the [data-theme="dark"] override block, and colors.js for the JS-side
   half of this system (canvas-drawn chart colors, which CSS can't reach).

   Adding a future theme (e.g. "Tokyo Night") means a new theme/<name>.css
   overriding whichever tokens it changes, a matching palette in
   colors.js, and one <link>/registration line — never touching this file
   or style.css. */

:root {
    /* Not a token reference (nothing else needs this value) — tells the
       browser to render native form controls/scrollbars in light mode.
       dark.css sets the dark equivalent directly on its own selector. */
    color-scheme: light;

    /* Colors */
    --color-bg: #e1dede;
    --color-fg: #000000;
    --color-heading: var(--color-fg); /* section headings: max-contrast text */
    --color-border: #000000;
    --color-border-light: #d1d5db;
    --color-muted: #6b7280;
    --color-grid: #e0e0e0;
    --color-overlay-backdrop: rgba(0, 0, 0, 0.4);
    /* Subtle elevation shade for panel/header "Islands" bands — a hair
       off --color-bg, not a load-bearing UI color like the ones above. */
    --color-surface: #ffffff;

    /* Shared positive/negative treatment for anything signed (candles,
       bid/ask, call/put, PnL, day-change) — matches colors.js's
       COLOR_GREEN/RED. Load-bearing: up is green, down is red, in every
       theme. Chart canvases use COLOR_CHART_UP/DOWN (blue/yellow) instead. */
    --color-up: #26a69a;
    --color-down: #ef5350;

    /* Typography */
    --font-family-mono: "JetBrains Mono", monospace;
    --font-weight-bold: 700;
    --letter-spacing-wide: 0.05em;

    /* Base+scale, not 6 independent absolute values — the theme editor
       (frontend/themeState.js) exposes ONE "font size" control that sets
       --font-size-scale, and every step below scales proportionally from
       it. The 6 rem values here are each step's scale=1 (default) size —
       don't hand-edit them individually to "fix" one component's size,
       that reintroduces per-step drift the scale factor is meant to
       prevent; adjust --font-size-scale (or, for one-off exceptions,
       add a genuinely new step). */
    --font-size-scale: 1;
    --font-size-xs: calc(0.75rem * var(--font-size-scale)); /* chart-col-label, tuning-label, positions-field */
    --font-size-sm: calc(0.8rem * var(--font-size-scale)); /* panel h2, strangle-finder-heading, strangle-result */
    --font-size-base: calc(0.85rem * var(--font-size-scale)); /* form inputs/selects/buttons */
    --font-size-md: calc(0.9rem * var(--font-size-scale)); /* rolling-oi-lookback, modal-header h2 */
    --font-size-lg: calc(1rem * var(--font-size-scale)); /* ticker-box/pnl-box, instrument-select */
    --font-size-xl: calc(1.2rem * var(--font-size-scale)); /* settings-btn, panel-close-btn */
    --font-size-hero: calc(1.5rem * var(--font-size-scale)); /* the one headline number in a panel (drift readout) */

    /* Spacing scale — every gap/padding/margin value used anywhere in
       style.css maps onto one of these. */
    --space-1: 2px;
    --space-2: 4px;
    --space-3: 5px;
    --space-4: 6px;
    --space-5: 8px;
    --space-6: 10px;
    --space-7: 12px;
    --space-8: 14px;
    --space-9: 16px;
    --space-10: 24px;

    /* Borders + radius */
    /* Zeroed app-wide per explicit instruction: component backgrounds
       (panel-header-bg's Islands bands, per-row backgrounds) are the
       distinguisher now, not stroked outlines. Still a real token (not
       deleted) so every `border: var(--border-width) solid ...`
       declaration collapses to an invisible 0-width border in one
       place rather than needing `border: none` hunted down site by
       site. --border-width-thick is intentionally NOT zeroed — it's
       used for two things that are semantic, not structural: the
       keyboard focus-visible outline, and the toast success/error
       accent border (see .toast in style.css) — both need to stay
       visible even though generic component borders don't. */
    --border-width: 0;
    --border-width-thick: 3px;
    --radius-none: 0;
    /* Small rounding for major "card" containers (panels, floating
       overlays) — see --radius-sm's usages in style.css. Small controls
       (buttons/inputs/selects) stay --radius-none/flat, deliberately not
       switched to this too. */
    --radius-sm: 5px;

    /* Component sizing — not a spacing/gap value, but a fixed
       width/height a specific component needs. */
    --size-topbar-height: 30px;
    --size-header-icon: 20px; /* top-bar icon buttons (mute / theme / settings) */
    --size-panel-min-height: 120px;
    --size-oi-panel-min-height: 380px;
    --size-input-min-width: 80px;
    --size-input-min-width-lg: 100px;
    --size-context-menu-min-width: 160px;
    --size-modal-min-width: 320px;
    --size-modal-max-width: 90vw;
    --size-modal-max-height: 80vh;
    --size-modal-wide-width: 1000px;     /* modal.js size: "wide" (Buy Call/Put leg picker) */
    --size-modal-wide-min-height: 60vh;
    --size-settings-panel-width: 420px;
    --size-settings-panel-max-width: 90vw;

    /* Motion */
    --transition-duration-fast: 0.2s;
    --transition-easing-standard: ease-out;

    /* Stacking order */
    --z-topbar: 50;
    --z-overlay-backdrop: 100;
    --z-settings-panel: 101;
    --z-context-menu: 200;
    --z-modal: 201;
    --z-toast: 300;
}

/* ============================================================
   Tier 2: Semantic tokens — compose the Tier 1 values above by
   ROLE, not by row number, so the same token applies uniformly
   wherever that role shows up. Theme-independent — dark.css only
   ever overrides Tier 1 color tokens, never these.
   ============================================================ */
:root {
    /* Component chrome (2026-09-16 refactor) — every major structural
       block that ISN'T independently themed (panels, each of the 4 Main
       Panel charts, modal, context menu, toast) shares these via the
       shared .component CSS class (background/border/radius) or by
       directly referencing --component-padding-x/-y at whatever DOM
       depth that component's padding actually lives (a panel's own
       padding; a modal's on .modal-header/.modal-body instead, since
       modal's padding lives on its content regions, not its frame — see
       style.css for exactly which selector references which). The
       header bar is the one exception — it has its OWN token group
       below (--header-*), not this one, because it needs to be
       independently restyleable. Change ANY ONE of these, every
       .component-using element updates — that's the entire point: no
       more hunting down N selectors for one visual tweak (this group
       replaces the old --panel-padding-x/-y/--panel-title-gap/
       --panel-header-bg, which only ever covered .panel and required a
       fresh, separate edit for every other container). See CLAUDE.md's
       "Full design-token system" bullet for the full list of what
       carries `.component` today and what's deliberately excluded
       (`.settings-panel`, form controls, inter-component gap). */
    --component-bg: var(--color-surface);
    --component-border-width: var(--border-width);
    --component-border-color: var(--color-border);
    --component-radius: var(--radius-sm);
    --component-padding-x: var(--space-5);
    --component-padding-y: var(--space-3);
    /* Roomier padding for the Row 2/3 data panels (Positions, Orders, OI, Alerts). */
    --panel-padding-x: var(--space-9);
    --panel-padding-y: var(--space-7);
    --component-title-gap: var(--space-2);
    /* Row 1's 4 chart columns need their title-row HEIGHT to match
       exactly, not just their padding — see style.css's .chart-col-label/
       .main-chart-header for why a browser's native <select> chrome makes
       that impossible to guarantee from padding/line-height alone. */
    --chart-col-header-height: 24px;
    /* Empty placeholder strip under each Row-1 chart, identical across
       all 4 columns so their bottoms stay aligned. */
    /* Gap between each Row-1 header and its chart, same on all 4 columns. */
    --chart-col-header-gap: 3px;
    --chart-col-footer-height: var(--chart-col-header-height);

    /* Header bar (Row 0, .row-top) — its OWN token group, not a member
       of the shared .component class, because the user explicitly
       wants it independently restyleable (different bg/border/radius/
       padding from every other component without touching them).
       Defaults to mirroring --component-* so it looks identical to
       everything else until one of these is deliberately overridden —
       override any of these six, only the header bar changes. */
    --header-bg: var(--component-bg);
    --header-border-width: var(--component-border-width);
    --header-border-color: var(--component-border-color);
    --header-radius: var(--component-radius);
    --header-padding-x: var(--component-padding-x);
    --header-padding-y: var(--component-padding-y);

    /* Settings slide-in panel — same "own independent token group"
       treatment as the header bar above, same reason (explicit
       instruction: restyleable without touching every other
       component). Defaults mirror --component-* so it looks identical
       until overridden. Radius is still only applied to the panel's
       two EXPOSED corners (top-left/bottom-left, its one free edge —
       top/right/bottom are pinned flush to the viewport) — see
       style.css's `.settings-panel` for the per-corner radius. */
    --settings-panel-bg: var(--component-bg);
    --settings-panel-border-width: var(--component-border-width);
    --settings-panel-border-color: var(--component-border-color);
    --settings-panel-radius: var(--component-radius);
    --settings-panel-padding-x: var(--space-9);
    --settings-panel-padding-y: var(--space-7);

    /* Position alarm flash (positionsPane.js) */
    --alarm-flash-strength: 35%;

    /* Drift gauge (driftPanel.js) */
    --size-drift-gauge-width: 180px;
    --size-basket-gauge-width: 130px;
    --size-gauge-stroke: 8px;
    --size-gauge-longer-stroke: 4px;
    --size-gauge-tick-stroke: 1.5px;
    --size-gauge-needle-stroke: 3px;
    --size-drift-leg-name-width: 3.5em;

    /* Page-level layout — space BETWEEN components, not inside them.
       Deliberately a separate group from the one above: resizing what's
       inside a component must never accidentally resize the gap around
       it, or vice versa. */
    /* +2px per explicit instruction (was --space-3/5px flat) — composed
       from two tokens rather than a new literal value. Governs both the
       gap between rows (body) and the gap between panels within a row
       (.row) — i.e. "the gap between components." */
    --row-gap: calc(var(--space-3) + var(--space-1));
    --row-padding: var(--space-3); /* tightened further, was --space-5 */
}