/* ═══ PLATFORM DEEP DARK (owner, 2026-10-11) ══════════════════════════════════
   One token layer for the whole platform, the same deep-dark look Order Flow
   shipped with (css/orderflow-dark.css now reads these names too).

   How it reaches every page: the frontend server injects this file, the
   generated literal map (ix-deep-dark-map.css), the pre-paint theme sync and
   js/ix-theme.js into the <head> of every rendered page (src/server.ts, the
   render post-processor). Dark is the default; the viewer's sun/moon switch
   (cookie ix_theme + localStorage ix_theme_choice) or ?light=1 picks light.

   Specificity: every dark rule sits under :root[data-theme="dark"] (0,2,0),
   which beats the per-page html[data-theme="dark"]{...} token blocks (0,1,1)
   regardless of source order, so pages keep their layout and get one palette.

   Light is untouched: nothing below applies without data-theme="dark", and
   the codemodded literals fall back to their original light value.
   Print and PDF stay on paper: dark is screen-only and @media print restores
   the light tokens (js/ix-theme.js also flips to light around window.print).

   DARK = LIGHT, MIRRORED (owner, 2026-10-11): every value below is its light
   counterpart with the same hue and chroma (OKLCH), only the lightness moved
   for a dark ground (js/ix-color-mirror.js computes them; dark-mirror-check
   verifies pages hue for hue). Neutrals are light's warm family turned dark:
     canvas #fbfaf8 -> #121110   surface #fff -> #1a1917   raised -> #201e1c
     chip #f4f1ec -> #24221f     line #efece6 -> #2b2926   line-2 -> #36332f
     ink #1c1a17 -> #ece9e3      ink-2 #5c5751 -> #b8b2a9  muted -> #9a948a
   Semantic inks (light -> dark, contrast on the card #1a1917 / chip #24221f):
     up #2e7d55 -> #53a076 5.6/5.0   down #c1443a -> #ea695c 5.6/5.0
     accent-ink #b0532f -> #d87753   warn #9a6b13 -> #b9893a   amber #b57f19 -> #be8726
     blue #3f8ed6 -> #4796df         violet #8a63e0 -> #a07bfa  gold #8f6b33 -> #b18b53
   Text on card / canvas / chip: ink 14.5 / 15.6 / 13.1, ink-2 8.4 / 9.0 / 7.5,
   muted 5.8 / 6.3 / 5.3. Accent #d97757 fills keep light's fill and carry dark
   text (#121110, 6.0:1; white on it is 3.1:1). */

:root {
  --ixdd-ground: #0e0d0c;  /* deepest wells */
  --ixdd-canvas: #121110;  /* light #fbfaf8 */
  --ixdd-card: #1a1917;    /* light #ffffff: cards, menus, inputs, chart grounds */
  --ixdd-raised: #201e1c;  /* light #fdfcfa */
  --ixdd-chip: #24221f;    /* light #f4f1ec: chips, hover */
  --ixdd-line: #2b2926;    /* light #efece6 */
  --ixdd-line-2: #36332f;  /* light #e4e0d8 */
  --ixdd-grid: #242220;    /* light chart grid #f1eee8 */
  --ixdd-ink: #ece9e3;     /* light #1c1a17 */
  --ixdd-ink-2: #b8b2a9;   /* light #5c5751 */
  --ixdd-muted: #9a948a;   /* light #7d786f / #6f6a62 */
  --ixdd-faint: #7f7a72;   /* large text / decoration only */
  --ixdd-accent: #d97757;  /* light #d97757 */
  --ixdd-accent-ink: #d87753; /* light #a94e2c */
  --ixdd-accent-soft: #2c190d; /* light #fbeee7 */
  --ixdd-on-accent: #121110;
  --ixdd-up: #53a076;      /* light #2e7d55 */
  --ixdd-dn: #ea695c;      /* light #c1443a */
  --ixdd-up-soft: #132219; /* light #e9f2ec */
  --ixdd-dn-soft: #2b1816; /* light #f8ebe9 */
  --ixdd-up-line: #2b4b31; /* light #c6ddc9 */
  --ixdd-dn-line: #583935; /* light #efd6d2 */
  --ixdd-warn: #b9893a;    /* light #9a6b13 */
  --ixdd-warn-soft: #281c00; /* light #fbf3e2 */
  --ixdd-warn-line: #514100; /* light #e8d9a8 */
  --ixdd-amber: #be8726;   /* light #b57f19 */
  --ixdd-gold: #b18b53;    /* light #8f6b33 */
  --ixdd-gold-soft: #271c05; /* light #f6efe2 */
  --ixdd-blue: #4796df;    /* light #3f8ed6 */
  --ixdd-blue-soft: #11202c; /* light #e8f1f9 */
  --ixdd-violet: #a07bfa;  /* light #8a63e0 */
  --ixdd-violet-soft: #21192f; /* light #f1edfb */
  --ixdd-viz-1: #5d93dc;   /* light #3d72b8 */
  --ixdd-viz-3: #9884dc;   /* light #7f6bc0 */
}

@media screen {
  :root[data-theme="dark"] {
    color-scheme: dark;
    /* The canonical page tokens (206 -light templates share this set). */
    --canvas: var(--ixdd-canvas); --surface: var(--ixdd-card); --raised: var(--ixdd-raised);
    --ink: var(--ixdd-ink); --ink-2: var(--ixdd-ink-2); --muted: var(--ixdd-muted);
    --line: var(--ixdd-line); --line-2: var(--ixdd-line-2); --chip: var(--ixdd-chip); --hover: var(--ixdd-chip);
    --accent: var(--ixdd-accent); --accent-ink: var(--ixdd-accent-ink); --accent-soft: var(--ixdd-accent-soft);
    /* Accent fills behind on-accent ink: light #b0532f + white (5.1:1), dark the accent + dark ink (5.6:1). */
    --accent-strong: var(--ixdd-accent);
    --accent-deep: #c46a4a; --accent-line: rgba(217, 119, 87, 0.34); --accent2: #d97652; --on-accent: var(--ixdd-on-accent);
    --up: var(--ixdd-up); --dn: var(--ixdd-dn); --up-soft: var(--ixdd-up-soft); --dn-soft: var(--ixdd-dn-soft);
    --up-line: var(--ixdd-up-line); --dn-line: var(--ixdd-dn-line);
    --green: var(--ixdd-up); --red: var(--ixdd-dn); --green-soft: var(--ixdd-up-soft); --red-soft: var(--ixdd-dn-soft); --green2: #54a078;
    --ok: var(--ixdd-up); --ok-soft: var(--ixdd-up-soft); --ok-line: var(--ixdd-up-line);
    --down: var(--ixdd-dn); --down-soft: var(--ixdd-dn-soft); --down-line: var(--ixdd-dn-line);
    --amber: var(--ixdd-amber); --amber-fill: #f4a63c; --amber-soft: var(--ixdd-warn-soft);
    --warn: var(--ixdd-warn); --warn-soft: var(--ixdd-warn-soft); --warn-bg: var(--ixdd-warn-soft); --warn-line: var(--ixdd-warn-line);
    --gold: var(--ixdd-gold); --gold-soft: var(--ixdd-gold-soft); --risky: #e08a54;
    --blue: var(--ixdd-blue); --blue-soft: var(--ixdd-blue-soft); --info: var(--ixdd-blue); --info-soft: var(--ixdd-blue-soft);
    --purple: var(--ixdd-violet); --purple-soft: var(--ixdd-violet-soft); --violet: var(--ixdd-violet); --violet-soft: var(--ixdd-violet-soft);
    --pf_violet: var(--ixdd-violet); --pf_amber: var(--ixdd-amber); --pf_blue: var(--ixdd-blue);
    /* Older token names a few pages still use. */
    --bg: var(--ixdd-canvas); --panel: var(--ixdd-card); --panel2: var(--ixdd-chip); --line2: var(--ixdd-line-2);
    --text: var(--ixdd-ink); --sub: var(--ixdd-ink-2);
    --iw-bg: var(--ixdd-canvas); --iw-surface: var(--ixdd-card); --iw-border: var(--ixdd-line); --iw-border-hover: var(--ixdd-line-2);
    --iw-text: var(--ixdd-ink); --iw-text-muted: var(--ixdd-ink-2); --iw-text-dim: var(--ixdd-muted);
    --iw-accent: var(--ixdd-accent); --iw-green: var(--ixdd-up); --iw-red: var(--ixdd-dn); --iw-cyan: var(--ixdd-blue); --iw-purple: var(--ixdd-violet);
    /* Charts (read by js/ix-theme.js and the pages' own chart code). */
    --chart-bg: var(--ixdd-card); --chart-grid: rgba(236, 233, 227, 0.07); --grid: rgba(236, 233, 227, 0.07);
    --shadow: 0 12px 36px -18px rgba(0, 0, 0, 0.7);
    --shadow-card: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -20px rgba(0, 0, 0, 0.6);
    --shadow-float: 0 60px 130px -48px rgba(0, 0, 0, 0.75);
    /* First-paint canvas used by partials/header.ejs pages. */
    --ix-body-bg: var(--ixdd-canvas); --ix-body-ink: var(--ixdd-ink);
    /* Display-prefs semantic colours (ixSemanticUp/Down read these). */
    --ix-up: var(--ixdd-up); --ix-down: var(--ixdd-dn);
  }

  /* The terminal / workspace family (terminal-*.css, bloomberg-terminal.css)
     was dark-first with its own warm palette and a dim #5e5953 label ink at
     2.7:1; it joins the shared palette. Its --bb-* set lives on
     body.ix-bloomberg-tight, hence the body selector. */
  :root[data-theme="dark"],
  :root[data-theme="dark"] body,
  :root[data-theme="dark"] body.ix-bloomberg-tight {
    --bg-1: var(--ixdd-canvas); --bg-2: var(--ixdd-card); --bg-3: var(--ixdd-raised); --bg-elev: var(--ixdd-raised);
    --border: var(--ixdd-line); --border-2: var(--ixdd-line-2);
    --text-2: var(--ixdd-ink-2); --text-3: var(--ixdd-muted); --text-4: var(--ixdd-muted);
    --gain: var(--ixdd-up); --loss: var(--ixdd-dn);
    --bb-bg: var(--ixdd-canvas); --bb-bg-1: var(--ixdd-canvas); --bb-bg-2: var(--ixdd-card); --bb-bg-3: var(--ixdd-raised);
    --bb-bg-elev: var(--ixdd-raised); --bb-bg-panel: var(--ixdd-card); --bb-bg-row: var(--ixdd-card); --bb-bg-hover: var(--ixdd-chip);
    --bb-bg-input: var(--ixdd-canvas); --bb-bg-elevated: var(--ixdd-raised);
    --bb-border: var(--ixdd-line); --bb-border-2: var(--ixdd-line-2); --bb-border-bright: var(--ixdd-line-2);
    --bb-text: var(--ixdd-ink); --bb-text-2: var(--ixdd-ink-2); --bb-text-3: var(--ixdd-muted); --bb-text-4: var(--ixdd-muted);
    --bb-text-dim: var(--ixdd-muted); --bb-text-muted: var(--ixdd-ink-2);
    --bb-green: var(--ixdd-up); --bb-red: var(--ixdd-dn);
  }

  /* World monitor's own dark skin (world-monitor.css): same ground and inks
     as the platform; its muted #6a6560 was 3.0-3.5:1. Hues stay its own. */
  :root[data-theme="dark"]:not([data-ix-mirror]) {
    --wm-bg: var(--ixdd-ground); --wm-canvas: var(--ixdd-ground); --wm-panel: rgba(18, 17, 16, 0.94);
    --wm-text: var(--ixdd-ink); --wm-text-sec: var(--ixdd-ink-2); --wm-text-mute: var(--ixdd-muted);
  }

  /* World monitor in dark keeps light's layout (data-ix-mirror). The layer
     counts are accent at 85% opacity on a tinted row: full strength reads AA. */
  :root[data-ix-mirror] .wm-layer.on .cnt { opacity: 1; }

  /* The ix-dash kit (Tax / Risk tabs) and Order Flow scope their tokens on .ixd. */
  :root[data-theme="dark"] .ixd {
    --canvas: var(--ixdd-canvas); --surface: var(--ixdd-card); --raised: var(--ixdd-raised);
    --ink: var(--ixdd-ink); --ink-2: var(--ixdd-ink-2); --muted: var(--ixdd-muted);
    --line: var(--ixdd-line); --line-2: var(--ixdd-line-2); --chip: var(--ixdd-chip);
    --accent: var(--ixdd-accent); --accent-ink: var(--ixdd-accent-ink); --accent-soft: var(--ixdd-accent-soft);
    --up: var(--ixdd-up); --dn: var(--ixdd-dn); --up-soft: var(--ixdd-up-soft); --dn-soft: var(--ixdd-dn-soft);
    --warn: var(--ixdd-warn); --warn-soft: var(--ixdd-warn-soft);
    --viz-1: var(--ixdd-viz-1); --viz-2: var(--ixdd-accent); --viz-3: var(--ixdd-viz-3); --viz-track: var(--ixdd-chip);
    color-scheme: dark;
  }
  body.ix-updown .ixd { --up: var(--ix-up); --dn: var(--ix-down); }

  /* ── Ground ─────────────────────────────────────────────────────────────── */
  :root[data-theme="dark"],
  :root[data-theme="dark"] body { background-color: var(--ixdd-canvas); color: var(--ixdd-ink); }
  :root[data-theme="dark"] body.ixd-body { background: var(--ixdd-canvas); }

  /* ── Chrome: the sticky header every page hand-writes, ticker + news tapes,
        status bar, mega menus. Matched by structure, not by page. ──────── */
  :root[data-theme="dark"] header:has(> .hdr),
  :root[data-theme="dark"] header.topbar { background: rgba(18, 17, 16, 0.92) !important; border-bottom-color: var(--ixdd-line) !important; }
  :root[data-theme="dark"] .hdr .brand .sq { background: var(--ixdd-ink) !important; color: var(--ixdd-canvas) !important; }
  :root[data-theme="dark"] .navitem:hover > .nl,
  :root[data-theme="dark"] .navitem.active > .nl { background: var(--ixdd-chip) !important; color: var(--ixdd-ink) !important; }
  :root[data-theme="dark"] .navitem.cur > .nl { color: var(--ixdd-accent-ink) !important; }
  :root[data-theme="dark"] .dd { background: var(--ixdd-card) !important; border-color: var(--ixdd-line-2) !important; box-shadow: 0 14px 44px -12px rgba(0, 0, 0, 0.7) !important; }
  :root[data-theme="dark"] .dd a { color: var(--ixdd-ink-2) !important; }
  :root[data-theme="dark"] .dd a:hover { background: var(--ixdd-chip) !important; color: var(--ixdd-ink) !important; }
  :root[data-theme="dark"] .dd a.sel { background: var(--ixdd-accent-soft) !important; color: var(--ixdd-accent-ink) !important; }
  :root[data-theme="dark"] .icbtn:hover { background: var(--ixdd-chip) !important; color: var(--ixdd-ink) !important; }
  :root[data-theme="dark"]:not([data-ix-mirror]) .icbtn .badge,
  :root[data-theme="dark"] .wn-badge { color: var(--ixdd-on-accent) !important; }
  :root[data-theme="dark"] .avatar { background: var(--ixdd-accent-soft) !important; color: var(--ixdd-accent-ink) !important; }
  :root[data-theme="dark"] .ticker,
  :root[data-theme="dark"] .tickerbar,
  :root[data-theme="dark"] .tk-bar,
  :root[data-theme="dark"] .newsbar,
  :root[data-theme="dark"] .nw-bar { background: var(--ixdd-canvas) !important; border-color: var(--ixdd-line) !important; }
  :root[data-theme="dark"] .statusbar { background: var(--ixdd-canvas) !important; border-top-color: var(--ixdd-line) !important; color: var(--ixdd-muted) !important; }
  :root[data-theme="dark"] .statusbar .sb-brand { color: var(--ixdd-accent-ink) !important; }

  /* Accent fills carry dark text (white on #d97757 is 3.1:1): the codemod
     tokenises white text that shares a rule with an accent fill
     (--dk-tx-onaccent) and js/ix-theme.js handles fills set from script. */
  :root[data-theme="dark"] .ixd .ixd-btn.primary { color: var(--ixdd-on-accent) !important; }

  /* ── Form controls ──────────────────────────────────────────────────────── */
  :root[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
  :root[data-theme="dark"] select,
  :root[data-theme="dark"] textarea { color-scheme: dark; }
  :root[data-theme="dark"] input::placeholder,
  :root[data-theme="dark"] textarea::placeholder { color: var(--ixdd-faint); opacity: 1; }
  :root[data-theme="dark"] option { background: var(--ixdd-card); color: var(--ixdd-ink); }
  :root[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--ixdd-line-2); }
  :root[data-theme="dark"] ::-webkit-scrollbar-track { background: transparent; }
  :root[data-theme="dark"] ::selection { background: rgba(217, 119, 87, 0.35); color: var(--ixdd-ink); }

  /* Tooltips / toasts that are light-on-dark in light stay readable. */
  :root[data-theme="dark"] .ixd-tipbox { background: var(--ixdd-ink); color: var(--ixdd-canvas); }

  /* ── Inline styles written as literals in JS-built markup (innerHTML) that
        the codemod cannot reach (built from variables or concatenation). ── */
  :root[data-theme="dark"] [style*="background:#fff;"], :root[data-theme="dark"] [style*="background: #fff;"],
  :root[data-theme="dark"] [style*="background:#ffffff"], :root[data-theme="dark"] [style*="background: #ffffff"],
  :root[data-theme="dark"] [style*="background:white"], :root[data-theme="dark"] [style*="background: white"],
  :root[data-theme="dark"] [style*="background-color:#fff;"], :root[data-theme="dark"] [style*="background-color: #fff;"],
  :root[data-theme="dark"] [style*="background-color:#ffffff"], :root[data-theme="dark"] [style*="background-color: #ffffff"],
  :root[data-theme="dark"] [style*="background-color:white"], :root[data-theme="dark"] [style*="background-color: white"] { background-color: var(--ixdd-card) !important; }
  :root[data-theme="dark"] [style*="color:#1c1a17"], :root[data-theme="dark"] [style*="color: #1c1a17"],
  :root[data-theme="dark"] [style*="color:#000;"], :root[data-theme="dark"] [style*="color: #000;"],
  :root[data-theme="dark"] [style*="color:#111"], :root[data-theme="dark"] [style*="color: #111"],
  :root[data-theme="dark"] [style*="color:#333"], :root[data-theme="dark"] [style*="color: #333"] { color: var(--ixdd-ink) !important; }
  :root[data-theme="dark"] [style*="color:#5c5751"], :root[data-theme="dark"] [style*="color: #5c5751"],
  :root[data-theme="dark"] [style*="color:#666"], :root[data-theme="dark"] [style*="color: #666"],
  :root[data-theme="dark"] [style*="color:#555"], :root[data-theme="dark"] [style*="color: #555"] { color: var(--ixdd-ink-2) !important; }

  /* Images that are dark line art on white (logos with a white plate) keep a
     light plate so they stay legible; opt in with .ix-keep-light. */
  :root[data-theme="dark"] .ix-keep-light { background: #fbfaf8 !important; color: #1c1a17 !important; }
}

/* ── The sun / moon switch (js/ix-theme.js renders it into each header). ── */
.ix-theme-sw { display: inline-flex; align-items: center; gap: 6px; font: inherit; font-size: 0.78rem; font-weight: 600; line-height: 1;
  color: var(--ink-2, #5c5751); background: var(--surface, #fff); border: 1px solid var(--line, #efece6); border-radius: 999px;
  padding: 6px 12px 6px 9px; cursor: pointer; white-space: nowrap; flex-shrink: 0; }
.ix-theme-sw:hover { color: var(--ink, #1c1a17); border-color: var(--line-2, #e6e2da); }
.ix-theme-sw:focus-visible { outline: 2px solid var(--accent, #d97757); outline-offset: 2px; }
.ix-theme-sw svg { width: 15px; height: 15px; flex-shrink: 0; }
/* "Dark" and "Light" take the same width, so switching never moves the header. */
.ix-theme-sw .ix-theme-lbl, #ofThemeLbl { display: inline-grid; justify-items: start; }
.ix-theme-sw .ix-theme-lbl::before, .ix-theme-sw .ix-theme-lbl::after, #ofThemeLbl::before, #ofThemeLbl::after {
  content: "Light"; height: 0; overflow: hidden; visibility: hidden; }
.ix-theme-sw .ix-theme-lbl::after, #ofThemeLbl::after { content: "Dark"; }
.ix-theme-sw .ix-ti-moon { display: none; }
html[data-theme="light"] .ix-theme-sw .ix-ti-sun { display: none; }
html[data-theme="light"] .ix-theme-sw .ix-ti-moon { display: inline; }
.ix-theme-sw .ix-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ix-theme-sw.ix-float { position: fixed; left: 14px; bottom: 14px; z-index: 9000; box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.35); }
@media (max-width: 640px) {
  .ix-theme-sw .ix-theme-lbl { display: none; }
  .ix-theme-sw { padding: 7px; }
  .ix-theme-sw.ix-hide-phone { display: none; }
  .ix-theme-sw.ix-float { left: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}
@media print { .ix-theme-sw { display: none !important; } }

/* ── Paper: print and PDF always render light. ─────────────────────────── */
@media print {
  :root[data-theme="dark"] {
    color-scheme: light;
    --canvas: #fbfaf8; --surface: #ffffff; --raised: #fdfcfa; --ink: #1c1a17; --ink-2: #5c5751; --muted: #6f6a62;
    --line: #efece6; --line-2: #e6e2da; --chip: #f4f1ec; --hover: #f6f3ee;
    --accent: #d97757; --accent-soft: #fbeee7; --on-accent: #ffffff;
    --up: #2e7d55; --dn: #c1443a; --up-soft: #e9f2ec; --dn-soft: #f8ebe9;
    --amber: #b57f19; --amber-soft: #fdf4e3; --amber-fill: #f4a63c; --warn: #9a6b13; --warn-soft: #fbf3e2;
    --blue: #3f8ed6; --blue-soft: #e8f1f9; --purple: #8a63e0; --violet: #8a63e0;
    --bg: #fbfaf8; --panel: #ffffff; --panel2: #f4f1ec; --text: #1c1a17; --sub: #5c5751;
    --ix-body-bg: #fbfaf8; --ix-body-ink: #1c1a17;
  }
  :root[data-theme="dark"], :root[data-theme="dark"] body { background: #ffffff !important; color: #1c1a17 !important; }
}