/* v2 palette and type scale. docs/v2-style.md is the spec. This file is the only place a v2 color is written.
   Kit token names (ui-kit/index.html / style prompt §2) are the source of truth; --v2-* aliases keep callers stable. */
@font-face {
  font-family: "Departure Mono";
  src: url("/fonts/DepartureMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  /* swap + preload: optional never painted Departure (labels fell back to 11px JetBrains). */
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "JetBrains Mono";
  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
:root {
  /* Kit tokens — names and values from ui-kit/index.html (fonts self-hosted above; --pix not applied to surfaces yet). */
  --u: 8px;
  --r: 0;
  --bg: #0d0a0a;
  --tile: #120f10;
  --alt: #17131a;
  --line: #352f33; /* 1.46:1 dividers */
  --line-2: #4d474b; /* 2.1:1 input borders, focus ring base */
  --tx: #e5e4e4; /* APCA Lc 90 on --tile: data, numbers */
  --tx-2: #cbccd2; /* Lc 75 secondary values */
  --mute: #afb2bc; /* Lc 60 labels, column headers */
  --dim: #98949e; /* Lc 45 placeholder, disabled, axis ticks */
  --acc: #c47f80; /* Lc 43: graphics only (candles, depth, bars, underlines) */
  --acc-hi: #e69a9b; /* Lc 58: accent text + filled blocks (ink on it Lc 60) */
  --bone: #d7d0cb; /* Lc 78 short / ask */
  --ok: #54ca99; /* Lc 62 profit */
  --warn: #ffba29; /* Lc 72 */
  --crit: #d03b3b; /* fills and bars only, never small text */
  --crit-tx: #ff9994; /* Lc 62 loss text */
  --ink: #000000; /* on-accent / inverted-block text (kit #000) */
  --in: var(--ok);
  --out: var(--acc);
  --mono: ui-monospace, "JetBrains Mono", "SFMono-Regular", Menlo, Consolas, monospace;
  --pix: "Departure Mono", var(--mono);
  /* Style knobs: pixel values live here so a second style can swap them in one place.
     Motion: --st is the kit's 4-frame step; the others are the same step at other frame counts.
     Frame-count animations (marquees, blink, spin sprites) keep their literal steps(). */
  --st: steps(4, end);
  --st-1: steps(1, end);
  --st-2: steps(2, end);
  --st-3: steps(3, end);
  --st-6: steps(6, end);
  --st-8: steps(8, end);
  --t: 160ms;
  /* Hard offset shadows: offset only, the colour stays at the use site (box-shadow: var(--v2-shadow-4) var(--acc)). */
  --v2-shadow-0: 0 0 0;
  --v2-shadow-2: 2px 2px 0;
  --v2-shadow-3: 3px 3px 0;
  --v2-shadow-3-flip: -3px 3px 0;
  --v2-shadow-4: 4px 4px 0;
  --v2-shadow-8: 8px 8px 0;
  --v2-shadow-10: 10px 10px 0;
  --hatch: repeating-linear-gradient(45deg, var(--line) 0 1px, transparent 1px 8px);
  --hatch-bg: repeating-linear-gradient(45deg, var(--line) 0 1px, var(--bg) 1px 7px);
  --v2-scanlines: repeating-linear-gradient(to bottom, var(--v2-scan) 0 1px, transparent 1px 3px);
  /* Kit TYPE scale (docs/v2-style.md §3 + Tokens tab): --pix ×11; --mono 12/13/16. */
  /* Departure Mono (--pix): 11 label/button/tag/tile header strip · 22 section title · 33 big value · 66 hero */
  --fs-11: 11px;
  --fs-22: 22px;
  --fs-33: 33px;
  --fs-66: 66px;
  /* Label size for --pix UI (fallback 12px until this token exists on older branches). */
  --fs-pix-label: var(--fs-11);
  /* JetBrains Mono (--mono): 12 data · 13 body · 16 emphasized value */
  --fs-12: 12px;
  --fs-13: 13px;
  --fs-16: 16px;

  /* --v2-* aliases → kit. Long/buy = --acc, short/sell = --bone (anh 2026-10-13).
     --ok / --crit stay status + PnL only — do not alias buy/sell to them. */
  --v2-bg: var(--bg);
  --v2-tile: var(--tile);
  --v2-header: var(--alt);
  --v2-line: var(--line);
  --v2-text: var(--tx);
  --v2-muted: var(--mute);
  --v2-rose: var(--acc);
  --v2-bone: var(--bone);
  --v2-buy: var(--acc);
  --v2-buy-hi: var(--acc-hi); /* long text and filled LONG blocks (APCA) */
  --v2-sell: var(--bone);
  --v2-sell-text: var(--bone);
  --v2-leader: #4d474b;
  --v2-grid: #282226; /* 1.22:1 chart grid */
  --v2-scan: #ffffff;
  --v2-checker: #000000;
  --v2-veil: rgba(5, 3, 3, 0.82);
  --v2-buy-soft: rgba(196, 127, 128, 0.55);
  --v2-sell-soft: rgba(215, 208, 203, 0.5);
  /* Status / PnL soft fills (share card hero); keep --ok / --crit channels. */
  --v2-ok-soft: rgba(84, 202, 153, 0.55);
  --v2-crit-soft: rgba(208, 59, 59, 0.5);
  /* Chart drawing fills (rect 0.12 / measure 0.16). Up/dn follow buy/sell = acc/bone. */
  --v2-draw-fill: rgba(196, 127, 128, 0.12);
  --v2-draw-fill-up: rgba(196, 127, 128, 0.12);
  --v2-draw-fill-dn: rgba(215, 208, 203, 0.12);
  --v2-draw-fill-measure: rgba(196, 127, 128, 0.16);
  --v2-draw-fill-measure-up: rgba(196, 127, 128, 0.16);
  --v2-draw-fill-measure-dn: rgba(215, 208, 203, 0.16);
  /* Margin usage bar: cell 1 (low) → cell 10 (high). Follows the theme: --tx → --acc over
     cells 1–6, then --acc → status --crit over 7–10 so high usage still reads as danger. */
  --v2-risk-1: color-mix(in srgb, var(--acc) 10%, var(--tx));
  --v2-risk-2: color-mix(in srgb, var(--acc) 28%, var(--tx));
  --v2-risk-3: color-mix(in srgb, var(--acc) 46%, var(--tx));
  --v2-risk-4: color-mix(in srgb, var(--acc) 64%, var(--tx));
  --v2-risk-5: color-mix(in srgb, var(--acc) 82%, var(--tx));
  --v2-risk-6: var(--acc);
  --v2-risk-7: color-mix(in oklch, var(--crit) 25%, var(--acc));
  --v2-risk-8: color-mix(in oklch, var(--crit) 50%, var(--acc));
  --v2-risk-9: color-mix(in oklch, var(--crit) 75%, var(--acc));
  --v2-risk-10: var(--crit); /* status --crit (not sell) */
  --v2-mono: var(--mono);
  --v2-fs: var(--fs-12);
  --v2-lh: 1.2;
  /* v2 aliases → kit TYPE steps (U3 floors + v0.4 remap: equity 24→33 big value). */
  --v2-fs-stat: var(--fs-16);
  --v2-fs-equity: var(--fs-33);
  --v2-fs-sub: var(--fs-16);
  --v2-fs-input: var(--fs-13);
  --v2-fs-side: var(--fs-13);
  --v2-fs-axis: var(--fs-12);
  --v2-fs-tag: var(--fs-12);
  --v2-track: 0.04em;
  --v2-track-label: 0.08em;
  --v2-track-logo: 0.22em;
  --v2-track-submit: 0.14em;
  --v2-track-toast: 0.12em;
  --v2-nav-h: 44px;
  --v2-stat-h: 86px;
  --v2-bottom-h: 224px;
  /* Panel title strip: style §3 = 11px pix; preview height 33px (not --fs-22). */
  --v2-hd-h: 33px;
  --v2-rule: 1px;
  --v2-chart-h: 560px;
  --v2-book-h: 640px;
  --v2-trades-h: 300px;
  --v2-scan-opacity: 0.03;
  --v2-checker-opacity: 0.35;
  --v2-depth-opacity: 0.17;
  /* /spin big button bevel: shade, glint and the darker lip under it (follow the theme accent). */
  --v2-bevel-shade: color-mix(in srgb, var(--ink) 35%, transparent);
  --v2-bevel-glint: color-mix(in srgb, var(--tx) 25%, transparent);
  --v2-bevel-lip: color-mix(in srgb, var(--acc) 55%, var(--ink));
  /* Fixed swatches for the theme menu. These do not follow the active accent. */
  --v2-sw-rose: #c47f80;
  --v2-sw-ice: #6eabbf;
  --v2-sw-vapor: #c47ab0;
  --v2-sw-lcd: #9aab57;
  --v2-sw-ember: #d9834f;
  /* CUSTOM row swatch: theme-boot.js sets the saved hue's --acc inline; this is the fallback. */
  --v2-sw-custom: var(--acc);
  /* AUTO row swatch: theme-boot.js / theme.js set the hour + weather --acc inline; this is the fallback. */
  --v2-sw-auto: var(--acc);
  --v2-sw-ct-standard: #afb2bc;
  --v2-sw-ct-soft: #928f97;
  --v2-sw-ct-high: #f4f3f3;
  color-scheme: dark;
}

/* Sibling themes. Rose is :root (no data-theme). Each block shifts the near-black
   base and --acc only. --bone (short), --ok / --warn / --crit / --crit-tx (status
   and PnL) stay so long/short and profit colors keep their contrast. Accent softs
   follow the new --acc channels. */
html[data-theme="ice"] {
  --bg: #090b0d;
  --tile: #0e1013;
  --alt: #10141a;
  --line: #2d3138;
  --line-2: #454950;
  --acc: #6eabbf;
  --acc-hi: #76b8cd;
  --v2-leader: #454950;
  --v2-grid: #20242a;
  --v2-veil: rgba(3, 5, 8, 0.82);
  --v2-buy-soft: rgba(110, 171, 191, 0.55);
  --v2-draw-fill: rgba(110, 171, 191, 0.12);
  --v2-draw-fill-up: rgba(110, 171, 191, 0.12);
  --v2-draw-fill-measure: rgba(110, 171, 191, 0.16);
  --v2-draw-fill-measure-up: rgba(110, 171, 191, 0.16);
}

html[data-theme="vapor"] {
  --bg: #0d090d;
  --tile: #120e12;
  --alt: #181119;
  --line: #372d37;
  --line-2: #504550;
  --acc: #c47ab0;
  --acc-hi: #e594ce;
  --v2-leader: #504550;
  --v2-grid: #2a202a;
  --v2-veil: rgba(8, 4, 8, 0.82);
  --v2-buy-soft: rgba(196, 122, 176, 0.55);
  --v2-draw-fill: rgba(196, 122, 176, 0.12);
  --v2-draw-fill-up: rgba(196, 122, 176, 0.12);
  --v2-draw-fill-measure: rgba(196, 122, 176, 0.16);
  --v2-draw-fill-measure-up: rgba(196, 122, 176, 0.16);
}
html[data-theme="lcd"] {
  --bg: #0a0c07;
  --tile: #0f110c;
  --alt: #14170f;
  --line: #2e3326;
  --line-2: #464c3d;
  --acc: #9aab57;
  --acc-hi: #a4b75c;
  --v2-leader: #464c3d;
  --v2-grid: #212619;
  --v2-veil: rgba(5, 6, 3, 0.82);
  --v2-buy-soft: rgba(154, 171, 87, 0.55);
  --v2-draw-fill: rgba(154, 171, 87, 0.12);
  --v2-draw-fill-up: rgba(154, 171, 87, 0.12);
  --v2-draw-fill-measure: rgba(154, 171, 87, 0.16);
  --v2-draw-fill-measure-up: rgba(154, 171, 87, 0.16);
}
html[data-theme="ember"] {
  --bg: #0e0907;
  --tile: #130e0c;
  --alt: #19120e;
  --line: #392e2a;
  --line-2: #514642;
  --acc: #d9834f;
  --acc-hi: #f4975e;
  --v2-leader: #514642;
  --v2-grid: #2b221e;
  --v2-veil: rgba(8, 4, 3, 0.82);
  --v2-buy-soft: rgba(217, 131, 79, 0.55);
  --v2-draw-fill: rgba(217, 131, 79, 0.12);
  --v2-draw-fill-up: rgba(217, 131, 79, 0.12);
  --v2-draw-fill-measure: rgba(217, 131, 79, 0.16);
  --v2-draw-fill-measure-up: rgba(217, 131, 79, 0.16);
}

/* Contrast levels (APCA Lc on --tile). Standard is :root. html[data-contrast] is orthogonal to
   data-theme: it moves text, status and line lightness only, never the theme's surfaces or --acc.
   Accent text and lines keep each theme's hue via the html[data-theme][data-contrast] blocks. */
/* Soft: warmer, dimmer text for long night sessions (~15% less saturation). */
html[data-contrast="soft"] {
  --tx: #dbd7d3;
  --tx-2: #c3c4c8;
  --mute: #adaeb7;
  --dim: #928f97;
  --acc-hi: #d7999a;
  --bone: #ccc6c2;
  --ok: #66bf98;
  --crit-tx: #ff8e89;
  --warn: #edb34d;
  --line: #322c30;
  --line-2: #494246;
  --v2-leader: #494246;
  --v2-grid: #252023;
  --v2-sell-soft: rgba(204, 198, 194, 0.5);
  --v2-ok-soft: rgba(102, 191, 152, 0.55);
  --v2-draw-fill-dn: rgba(204, 198, 194, 0.12);
  --v2-draw-fill-measure-dn: rgba(204, 198, 194, 0.16);
}
html[data-theme="ice"][data-contrast="soft"] {
  --acc-hi: #7cb1c2;
  --line: #2a2e35;
  --line-2: #40454b;
  --v2-leader: #40454b;
  --v2-grid: #1e2228;
}
html[data-theme="vapor"][data-contrast="soft"] {
  --acc-hi: #d695c4;
  --line: #342a34;
  --line-2: #4b404b;
  --v2-leader: #4b404b;
  --v2-grid: #281e28;
}
html[data-theme="lcd"][data-contrast="soft"] {
  --acc-hi: #a1b169;
  --line: #2b3023;
  --line-2: #414739;
  --v2-leader: #414739;
  --v2-grid: #1f2417;
}
html[data-theme="ember"][data-contrast="soft"] {
  --acc-hi: #e3976a;
  --line: #362b27;
  --line-2: #4d423d;
  --v2-leader: #4d423d;
  --v2-grid: #291f1b;
}
/* High: brighter text; profit blue and loss orange so red-green colour-blind traders can tell them apart. */
html[data-contrast="high"] {
  --tx: #f4f3f3;
  --tx-2: #dbdbe1;
  --mute: #c3c6d0;
  --dim: #aba6b1;
  --acc-hi: #eda1a2;
  --bone: #eae3de;
  --ok: #7ecfff;
  --crit-tx: #ffb76c;
  --warn: #f0e442;
  --line: #40393d;
  --line-2: #605a5e;
  --v2-leader: #605a5e;
  --v2-grid: #2e282c;
  --v2-sell-soft: rgba(234, 227, 222, 0.5);
  --v2-ok-soft: rgba(126, 207, 255, 0.55);
  --v2-draw-fill-dn: rgba(234, 227, 222, 0.12);
  --v2-draw-fill-measure-dn: rgba(234, 227, 222, 0.16);
}
html[data-theme="ice"][data-contrast="high"] {
  --acc-hi: #7dbfd4;
  --line: #373c42;
  --line-2: #585c63;
  --v2-leader: #585c63;
  --v2-grid: #262a30;
}
html[data-theme="vapor"][data-contrast="high"] {
  --acc-hi: #ec9bd5;
  --line: #423742;
  --line-2: #635863;
  --v2-leader: #635863;
  --v2-grid: #302630;
}
html[data-theme="lcd"][data-contrast="high"] {
  --acc-hi: #abbe64;
  --line: #383e30;
  --line-2: #595f50;
  --v2-leader: #595f50;
  --v2-grid: #272c1f;
}
html[data-theme="ember"][data-contrast="high"] {
  --acc-hi: #fc9e66;
  --line: #433934;
  --line-2: #655955;
  --v2-leader: #655955;
  --v2-grid: #322823;
}

/* Kit pixel face (ui-kit .x-pix). Opt-in only — later U-PRs apply it to surfaces. Size must be a multiple of 11. */
.x-pix {
  font-family: var(--pix);
  font-weight: 400;
  font-synthesis: none;
  letter-spacing: 0;
  -webkit-font-smoothing: none;
  -moz-osx-font-smoothing: grayscale;
}

/* AUTO weather (theme.js sets html[data-wx] only on the AUTO theme): one faint pixel texture for
   empty tile areas, drawn in shell.css. White ink at 6–14% alpha, crisp 1px marks, no gradients. */
:root {
  --v2-wx: none;
  --v2-wx-size: auto;
}
html[data-wx="rain"] {
  --v2-wx: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'><g fill='%23ffffff' fill-opacity='0.1'><rect x='4' y='3' width='1' height='4'/><rect x='20' y='11' width='1' height='4'/><rect x='12' y='20' width='1' height='4'/><rect x='28' y='26' width='1' height='4'/></g></svg>");
  --v2-wx-size: 32px 32px;
}
html[data-wx="storm"] {
  --v2-wx: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'><g fill='%23ffffff' fill-opacity='0.11'><rect x='3' y='1' width='1' height='4'/><rect x='11' y='9' width='1' height='4'/><rect x='19' y='4' width='1' height='4'/><rect x='27' y='15' width='1' height='4'/><rect x='7' y='21' width='1' height='4'/><rect x='23' y='25' width='1' height='4'/></g></svg>");
  --v2-wx-size: 32px 32px;
}
html[data-wx="snowy"] {
  --v2-wx: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' shape-rendering='crispEdges'><g fill='%23ffffff' fill-opacity='0.14'><rect x='5' y='4' width='1' height='1'/><rect x='21' y='12' width='1' height='1'/><rect x='13' y='22' width='1' height='1'/><rect x='29' y='27' width='1' height='1'/><rect x='9' y='15' width='1' height='1'/></g></svg>");
  --v2-wx-size: 32px 32px;
}
html[data-wx="sun"] {
  --v2-wx: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'><g fill='%23ffffff' fill-opacity='0.1'><rect x='9' y='7' width='1' height='1'/><rect x='7' y='9' width='1' height='1'/><rect x='9' y='9' width='1' height='1'/><rect x='11' y='9' width='1' height='1'/><rect x='9' y='11' width='1' height='1'/><rect x='33' y='29' width='1' height='1'/><rect x='31' y='31' width='1' height='1'/><rect x='33' y='31' width='1' height='1'/><rect x='35' y='31' width='1' height='1'/><rect x='33' y='33' width='1' height='1'/></g></svg>");
  --v2-wx-size: 48px 48px;
}
html[data-wx="star"] {
  --v2-wx: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='48' height='48' shape-rendering='crispEdges'><g fill='%23ffffff' fill-opacity='0.14'><rect x='6' y='9' width='1' height='1'/><rect x='30' y='21' width='1' height='1'/><rect x='17' y='38' width='1' height='1'/><rect x='41' y='5' width='1' height='1'/></g></svg>");
  --v2-wx-size: 48px 48px;
}
html[data-wx="cloud"] {
  --v2-wx: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='32' shape-rendering='crispEdges'><g fill='%23ffffff' fill-opacity='0.07'><rect x='4' y='8' width='8' height='1'/><rect x='30' y='22' width='12' height='1'/><rect x='50' y='14' width='6' height='1'/></g></svg>");
  --v2-wx-size: 64px 32px;
}
html[data-wx="fog"] {
  --v2-wx: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='64' height='16' shape-rendering='crispEdges'><g fill='%23ffffff' fill-opacity='0.06'><rect x='0' y='4' width='20' height='1'/><rect x='36' y='11' width='16' height='1'/></g></svg>");
  --v2-wx-size: 64px 16px;
}