/* GENERATED by DeltaIntelligence_App/scripts/sync-tokens.mjs from
 * webapp/app/src/preview3/tokens.css — do not edit this file; edit the source
 * and run the script. The `.d2` scope is lifted to the document:
 *   :root                            dark (the default)
 *   :root[data-theme="light"]        light, stamped by the pre-paint boot
 *   :root:not([data-theme]) + OS     light with JavaScript off (follows the OS)
 *   .surface-night                   the dark tokens for a band, in both themes */

:root {
  /* ── colour: dark (default) — generated from Delta_UIUX/identity/tokens.json ── */
  /* surface */
  --bg:                  #111317;
  --bg-1:                #191C22;
  --bg-2:                #232730;
  --bg-3:                #1F232A;
  --field:               #111317;
  --tip-bg:              #2E333D;
  --night-bg:            #0C0E11;
  /* state */
  --hover-over:          #282C35;
  --pressed:             #2E333D;
  --disabled-bg:         #1C1F25;
  --skeleton:            #232730;
  --skeleton-hi:         #2B303A;
  --selection:           #34457A;
  /* material */
  --plate-face:          #21252D;
  --plate-face-hot:      #2A2F38;
  --plate-edge:          #0A0B0D;
  --edge-hi:             rgba(255, 255, 255, 0.06);
  /* text */
  --fg:                  #F0F1F3;
  --fg-2:                #B3BAC5;
  --fg-3:                #969FAC;
  --fg-3-over:           #969FAC;
  --fg-disabled:         #626A77;
  --fg-inverse:          #111317;
  --tip-fg:              #F0F1F3;
  --tip-fg-2:            #B3BAC5;
  /* line */
  --line:                #343A45;
  --line-2:              #434A56;
  --control:             #737D8C;
  --control-hover:       #8E97A5;
  --tip-border:          #4A5160;
  --scroll-thumb:        #434A56;
  /* accent */
  --accent:              #9BAEFF;
  --accent-hover:        #B9C6FF;
  --accent-soft:         #252F4D;
  --accent-fg:           #111317;
  --btn-primary-hover:   #B3C2FF;
  --btn-primary-pressed: #879CF0;
  --link-underline:      rgba(155, 174, 255, 0.50);
  /* semantic */
  --positive:            #73C69B;
  --negative:            #F28C97;
  --warning:             #DDB36B;
  --positive-soft:       #1C3329;
  --negative-soft:       #3F252B;
  --warning-soft:        #362D1F;
  --unknown-soft:        #2C2A42;
  /* decision */
  --go:                  #73C69B;
  --hold:                #B3BAC5;
  --caution:             #DDB36B;
  --veto:                #F28C97;
  /* health */
  --health-warn:         #DDB36B;
  --health-bad:          #F28C97;
  /* unknown */
  --unknown:             #B4A6DB;
  --unknown-rule:        #B4A6DB;
  /* error */
  --error:               #F28C97;
  /* market */
  --candle-up:           #3DBB7E;
  --candle-down:         #F06A76;
  /* chart */
  --chart-grid:          #22262D;
  --chart-level:         #6C7584;
  /* level */
  --lvl-period:          #5C95F7;
  --lvl-mo:              #B884F9;
  --lvl-nyo:             #90EE90;
  --lvl-mko:             #F0F1F3;
  --lvl-asia:            #F0E442;
  --lvl-london:          #F2675F;
  /* overlay */
  --scrim-sheet:         rgba(5, 6, 8, 0.60);
  --scrim-palette:       rgba(5, 6, 8, 0.52);
  /* shadows */
  --shadow-tip:          0 6px 18px rgba(0, 0, 0, 0.40);
  --shadow-toast:        0 12px 28px rgba(0, 0, 0, 0.38);
  --shadow-sheet:        0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-palette:      0 22px 56px rgba(0, 0, 0, 0.46);
  --shadow-plate:        0 8px 18px rgba(0, 0, 0, 0.34);
  --overlay-edge:        inset 0 1px 0 rgba(255, 255, 255, 0.06);
  /* ── aliases: declared once, resolve per theme ── */
  --hover:               var(--bg-2);
  --selected:            var(--accent-soft);
  --selected-hover:      var(--accent-soft);
  --focus:               var(--accent);
  --btn-primary:         var(--accent);
  --error-soft:          var(--negative-soft);
  --chart-axis:          var(--fg-3);
  --chart-crosshair:     var(--control);
  --chart-last:          var(--fg-3);
  /* ── type families (theme-free) ── */
  --font-ui:             "General Sans", "DI Symbols", "General Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --font-num:            "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
  --font-display:        "General Sans", "DI Symbols", "General Sans Fallback", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  /* ── type scale (theme-free; §4.3) ── */
  --fs-12:               12px;
  --fs-13:               13px;
  --fs-14:               14px;
  --fs-15:               15px;
  --fs-16:               16px;
  --fs-18:               18px;
  --fs-20:               20px;
  --fs-22:               22px;
  --fs-24:               24px;
  --fs-28:               28px;
  --fs-32:               32px;
  --fs-page:             28px;
  --fs-decision:         clamp(26px, 7.5vw, 32px);
  --fs-mkt-display:      clamp(40px, 28px + 3.1vw, 72px);
  --fs-mkt-h2:           clamp(28px, 22px + 1.5vw, 40px);
  --fs-mkt-h3:           20px;
  --fs-mkt-lede:         clamp(17px, 15.5px + 0.4vw, 20px);
  --fs-mkt-body:         16px;
  --fs-mkt-small:        14px;
  --fs-mkt-label:        13px;

  /* ── §6. Spacing, density, geometry — 4px base ────────────────────────── */
  --u: 4px;
  --pad-panel: 16px;
  --pad-decision: 20px;
  --gap-section: 16px;
  --gap-col: 20px;
  --row-evidence: 32px;   /* read in sequence, carry a status and a reason */
  --row-table: 28px;      /* scanned in columns, tabular */
  --row-change: 30px;     /* two-line capable, never truncated */
  --r-panel: 4px;
  --r-chip: 3px;
  --r-overlay: 8px;
  --rail-w: 224px;
  --rail-w-collapsed: 56px;

  /* ── §7. Motion — THREE durations, and nothing else ───────────────────—
   * These are the CSS half of lib/motion.ts; the numbers are the same numbers,
   * so a CSS transition and a framer tween on the same interaction cannot
   * drift apart. Read the header of lib/motion.ts for why each one is what it
   * is, and for the rule that financial values never animate at all.
   *   --t-surface     120ms  hover / focus / press feedback
   *   --t-indicator   160ms  the active rail item, the tab underline
   *   --t-disclosure  200ms  accordions, sheets, the palette
   * --t-flash is not a transition: it is the BOUNDED, single-iteration tint on
   * a cell whose value just changed. One run, never a loop. */
  --ease: cubic-bezier(0, 0, .38, .9);
  --t-surface: 120ms;
  --t-indicator: 160ms;
  --t-disclosure: 200ms;
  --t-flash: 600ms;
  /* Round 5 — the EXPRESSIVE tier (lib/motion.ts MS_X; DIRECTION.md §2). Only
   * on explanatory surfaces, only on arrival or reach — never on a data update.
   *   --t-settle  280ms  a surface arriving (8px rise + fade), once per route
   *   --t-lift    180ms  a plate reached for (4 / 8 / 12px)
   * The global reduced-motion switch below zeroes both. */
  --ease-settle: cubic-bezier(.2, .7, .2, 1);
  --t-settle: 280ms;
  --t-lift: 180ms;

  color-scheme: dark;
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-ui);
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

:root[data-theme="light"] {
  /* surface */
  --bg:                  #F6F5F2;
  --bg-1:                #FFFFFF;
  --bg-2:                #EEEDE9;
  --bg-3:                #FFFFFF;
  --field:               #FFFFFF;
  --tip-bg:              #202329;
  --night-bg:            #111317;
  /* state */
  --hover-over:          #EEEDE9;
  --pressed:             #E4E3DE;
  --disabled-bg:         #F1F0EC;
  --skeleton:            #EEEDE9;
  --skeleton-hi:         #E4E3DE;
  --selection:           #C8D5FF;
  /* material */
  --plate-face:          #F6F5F2;
  --plate-face-hot:      #FFFFFF;
  --plate-edge:          #D6D4CD;
  --edge-hi:             rgba(255, 255, 255, 0);
  /* text */
  --fg:                  #202329;
  --fg-2:                #555B65;
  --fg-3:                #626973;
  --fg-3-over:           #626973;
  --fg-disabled:         #949AA3;
  --fg-inverse:          #FFFFFF;
  --tip-fg:              #FFFFFF;
  --tip-fg-2:            #C3C8D0;
  /* line */
  --line:                #DDDFE4;
  --line-2:              #C8CBD2;
  --control:             #7D8592;
  --control-hover:       #5F6672;
  --tip-border:          #202329;
  --scroll-thumb:        #C3C6CD;
  /* accent */
  --accent:              #3459D1;
  --accent-hover:        #2744AE;
  --accent-soft:         #E9EEFF;
  --accent-fg:           #FFFFFF;
  --btn-primary-hover:   #2B4CC0;
  --btn-primary-pressed: #2340A6;
  --link-underline:      rgba(52, 89, 209, 0.45);
  /* semantic */
  --positive:            #19734A;
  --negative:            #B33A46;
  --warning:             #8A5B14;
  --positive-soft:       #E6F2EB;
  --negative-soft:       #FBE9EB;
  --warning-soft:        #F8EEDC;
  --unknown-soft:        #EFECF7;
  /* decision */
  --go:                  #19734A;
  --hold:                #555B65;
  --caution:             #8A5B14;
  --veto:                #B33A46;
  /* health */
  --health-warn:         #8A5B14;
  --health-bad:          #B33A46;
  /* unknown */
  --unknown:             #695C96;
  --unknown-rule:        #695C96;
  /* error */
  --error:               #B33A46;
  /* market */
  --candle-up:           #1A8F5C;
  --candle-down:         #D7374A;
  /* chart */
  --chart-grid:          #EFEEEA;
  --chart-level:         #8A909A;
  /* level */
  --lvl-period:          #2F6FE4;
  --lvl-mo:              #8E44DB;
  --lvl-nyo:             #3A8A2E;
  --lvl-mko:             #202329;
  --lvl-asia:            #8F7A00;
  --lvl-london:          #D0312D;
  /* overlay */
  --scrim-sheet:         rgba(32, 35, 41, 0.32);
  --scrim-palette:       rgba(32, 35, 41, 0.24);
  /* shadows */
  --shadow-tip:          0 2px 6px rgba(32, 35, 41, 0.10), 0 6px 16px rgba(32, 35, 41, 0.10);
  --shadow-toast:        0 4px 10px rgba(32, 35, 41, 0.08), 0 12px 28px rgba(32, 35, 41, 0.12);
  --shadow-sheet:        0 8px 16px rgba(32, 35, 41, 0.06), 0 24px 48px rgba(32, 35, 41, 0.14);
  --shadow-palette:      0 8px 20px rgba(32, 35, 41, 0.08), 0 28px 56px rgba(32, 35, 41, 0.16);
  --shadow-plate:        0 1px 2px rgba(32, 35, 41, 0.06), 0 10px 22px rgba(32, 35, 41, 0.10);
  --overlay-edge:        inset 0 1px 0 rgba(255, 255, 255, 0);
  color-scheme: light;
}

/* no JavaScript: nothing is stamped, so the page follows the OS */
@media (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    /* surface */
    --bg:                  #F6F5F2;
    --bg-1:                #FFFFFF;
    --bg-2:                #EEEDE9;
    --bg-3:                #FFFFFF;
    --field:               #FFFFFF;
    --tip-bg:              #202329;
    --night-bg:            #111317;
    /* state */
    --hover-over:          #EEEDE9;
    --pressed:             #E4E3DE;
    --disabled-bg:         #F1F0EC;
    --skeleton:            #EEEDE9;
    --skeleton-hi:         #E4E3DE;
    --selection:           #C8D5FF;
    /* material */
    --plate-face:          #F6F5F2;
    --plate-face-hot:      #FFFFFF;
    --plate-edge:          #D6D4CD;
    --edge-hi:             rgba(255, 255, 255, 0);
    /* text */
    --fg:                  #202329;
    --fg-2:                #555B65;
    --fg-3:                #626973;
    --fg-3-over:           #626973;
    --fg-disabled:         #949AA3;
    --fg-inverse:          #FFFFFF;
    --tip-fg:              #FFFFFF;
    --tip-fg-2:            #C3C8D0;
    /* line */
    --line:                #DDDFE4;
    --line-2:              #C8CBD2;
    --control:             #7D8592;
    --control-hover:       #5F6672;
    --tip-border:          #202329;
    --scroll-thumb:        #C3C6CD;
    /* accent */
    --accent:              #3459D1;
    --accent-hover:        #2744AE;
    --accent-soft:         #E9EEFF;
    --accent-fg:           #FFFFFF;
    --btn-primary-hover:   #2B4CC0;
    --btn-primary-pressed: #2340A6;
    --link-underline:      rgba(52, 89, 209, 0.45);
    /* semantic */
    --positive:            #19734A;
    --negative:            #B33A46;
    --warning:             #8A5B14;
    --positive-soft:       #E6F2EB;
    --negative-soft:       #FBE9EB;
    --warning-soft:        #F8EEDC;
    --unknown-soft:        #EFECF7;
    /* decision */
    --go:                  #19734A;
    --hold:                #555B65;
    --caution:             #8A5B14;
    --veto:                #B33A46;
    /* health */
    --health-warn:         #8A5B14;
    --health-bad:          #B33A46;
    /* unknown */
    --unknown:             #695C96;
    --unknown-rule:        #695C96;
    /* error */
    --error:               #B33A46;
    /* market */
    --candle-up:           #1A8F5C;
    --candle-down:         #D7374A;
    /* chart */
    --chart-grid:          #EFEEEA;
    --chart-level:         #8A909A;
    /* level */
    --lvl-period:          #2F6FE4;
    --lvl-mo:              #8E44DB;
    --lvl-nyo:             #3A8A2E;
    --lvl-mko:             #202329;
    --lvl-asia:            #8F7A00;
    --lvl-london:          #D0312D;
    /* overlay */
    --scrim-sheet:         rgba(32, 35, 41, 0.32);
    --scrim-palette:       rgba(32, 35, 41, 0.24);
    /* shadows */
    --shadow-tip:          0 2px 6px rgba(32, 35, 41, 0.10), 0 6px 16px rgba(32, 35, 41, 0.10);
    --shadow-toast:        0 4px 10px rgba(32, 35, 41, 0.08), 0 12px 28px rgba(32, 35, 41, 0.12);
    --shadow-sheet:        0 8px 16px rgba(32, 35, 41, 0.06), 0 24px 48px rgba(32, 35, 41, 0.14);
    --shadow-palette:      0 8px 20px rgba(32, 35, 41, 0.08), 0 28px 56px rgba(32, 35, 41, 0.16);
    --shadow-plate:        0 1px 2px rgba(32, 35, 41, 0.06), 0 10px 22px rgba(32, 35, 41, 0.10);
    --overlay-edge:        inset 0 1px 0 rgba(255, 255, 255, 0);
    color-scheme: light;
  }
}

/* the night band: dark in both themes (SPEC §5.2) */
.surface-night {
  color-scheme: dark;
  --bg: var(--night-bg);
  --bg-1: #191C22;
  --bg-2: #232730;
  --bg-3: #1F232A;
  --field: #111317;
  --tip-bg: #2E333D;
  --hover-over: #282C35;
  --pressed: #2E333D;
  --disabled-bg: #1C1F25;
  --skeleton: #232730;
  --skeleton-hi: #2B303A;
  --selection: #34457A;
  --plate-face: #21252D;
  --plate-face-hot: #2A2F38;
  --plate-edge: #0A0B0D;
  --edge-hi: rgba(255, 255, 255, 0.06);
  --fg: #F0F1F3;
  --fg-2: #B3BAC5;
  --fg-3: #969FAC;
  --fg-3-over: #969FAC;
  --fg-disabled: #626A77;
  --fg-inverse: #111317;
  --tip-fg: #F0F1F3;
  --tip-fg-2: #B3BAC5;
  --line: #343A45;
  --line-2: #434A56;
  --control: #737D8C;
  --control-hover: #8E97A5;
  --tip-border: #4A5160;
  --scroll-thumb: #434A56;
  --accent: #9BAEFF;
  --accent-hover: #B9C6FF;
  --accent-soft: #252F4D;
  --accent-fg: #111317;
  --btn-primary-hover: #B3C2FF;
  --btn-primary-pressed: #879CF0;
  --link-underline: rgba(155, 174, 255, 0.50);
  --positive: #73C69B;
  --negative: #F28C97;
  --warning: #DDB36B;
  --positive-soft: #1C3329;
  --negative-soft: #3F252B;
  --warning-soft: #362D1F;
  --unknown-soft: #2C2A42;
  --go: #73C69B;
  --hold: #B3BAC5;
  --caution: #DDB36B;
  --veto: #F28C97;
  --health-warn: #DDB36B;
  --health-bad: #F28C97;
  --unknown: #B4A6DB;
  --unknown-rule: #B4A6DB;
  --error: #F28C97;
  --candle-up: #3DBB7E;
  --candle-down: #F06A76;
  --chart-grid: #22262D;
  --chart-level: #6C7584;
  --lvl-period: #5C95F7;
  --lvl-mo: #B884F9;
  --lvl-nyo: #90EE90;
  --lvl-mko: #F0F1F3;
  --lvl-asia: #F0E442;
  --lvl-london: #F2675F;
  --scrim-sheet: rgba(5, 6, 8, 0.60);
  --scrim-palette: rgba(5, 6, 8, 0.52);
  --shadow-tip: 0 6px 18px rgba(0, 0, 0, 0.40);
  --shadow-toast: 0 12px 28px rgba(0, 0, 0, 0.38);
  --shadow-sheet: 0 18px 44px rgba(0, 0, 0, 0.42);
  --shadow-palette: 0 22px 56px rgba(0, 0, 0, 0.46);
  --shadow-plate: 0 8px 18px rgba(0, 0, 0, 0.34);
  --overlay-edge: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  --hover: var(--bg-2);
  --selected: var(--accent-soft);
  --selected-hover: var(--accent-soft);
  --focus: var(--accent);
  --btn-primary: var(--accent);
  --error-soft: var(--negative-soft);
  --chart-axis: var(--fg-3);
  --chart-crosshair: var(--control);
  --chart-last: var(--fg-3);
}

@media (max-width: 767px) { :root { --fs-page: 24px; } }   /* one line, AFTER both blocks (SPEC §4.3, DEV-2) */

/* Tone lookup used by pills, squares, bands and tags — one place, no per-screen
 * maps. --tone-soft is the matching tint ground (SPEC §3.3). */
[data-tone="go"]      { --tone: var(--go);          --tone-soft: var(--positive-soft); }
[data-tone="hold"]    { --tone: var(--hold);        --tone-soft: var(--bg-2); }
[data-tone="caution"] { --tone: var(--caution);     --tone-soft: var(--warning-soft); }
[data-tone="veto"]    { --tone: var(--veto);        --tone-soft: var(--negative-soft); }
[data-tone="unknown"] { --tone: var(--unknown);     --tone-soft: var(--unknown-soft); }
[data-tone="warn"]    { --tone: var(--health-warn); --tone-soft: var(--warning-soft); }
[data-tone="bad"]     { --tone: var(--health-bad);  --tone-soft: var(--negative-soft); }

/* ── keyframes: TOP LEVEL ONLY ──────────────────────────────────────────── */
/* the value-change flash: one run from the soft accent, never a loop (SPEC §2.4) */
@keyframes d2-flash {
  from { background-color: var(--accent-soft); }
  to   { background-color: transparent; }
}
/* round 5: a surface arriving — one run, from a VISIBLE resting state's
   near neighbour (8px, faded), never parked at opacity 0 by an observer */
@keyframes d2-settle {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
/* skeleton pulse between two theme tokens (was a theme-blind color-mix) */
@keyframes d2-skeleton {
  0%, 100% { background-color: var(--skeleton); }
  50%      { background-color: var(--skeleton-hi); }
}

/* ── the global reduced-motion kill switch ──────────────────────────────—
 * One rule, unscoped, !important — nothing under .d2 can animate past it.
 * A MotionConfig at the root (shell.tsx) closes the JS-driven half. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}