/* =========================================================================
   TradeKit shared palette — the single source of truth for theme colors.

   Consumed by BOTH front ends:
     - the app: imported by desktop/web/src/index.css (bundled + hashed by
       Vite), where the @theme inline block maps the roles into Tailwind
       utilities and the island bridge reads the resolved values
       (lib/themes.ts readThemePalette → ThemePalette in desktop/src/theme.rs)
     - marketing: linked as /assets/theme/palettes.css by base.njk
       (passthrough-copied from this folder — eleventy.config.js +
       Dockerfile.marketing); its pages use the roles by name, and
       marketing/styles/site.css names the two its art kit leans on,
       --paper (--background) and --ink (--foreground).
   Both load tokens.css (this folder) right after this file: the Overprint
   design-language tokens (art inks, rules, overprint, motion —
   docs/design-language.md). Their defaults derive from the roles below,
   and any block here may override them.

   The built-ins are Overprint's two prints: Light is a risograph (cream
   paper, near-black ink, fluorescent art inks) and Dark is phosphor (CRT
   black, warm phosphor ink, broadcast primaries bright enough to glow).
   desktop/src/theme.rs mirrors both base blocks as the chart island's
   fallbacks, so keep the two in sync. Success / danger are each theme's
   up / down pair and ARE the chart's candle pair: tuned per mode (darker
   on cream so PnL text reads, brighter on black), and never a second
   green or red within a theme. If UI green / red ever diverges from the
   candles, that's a real UX regression (see theme.rs).

   How switching works (same on both sides — desktop/web/src/lib/theme.tsx
   and marketing/js/style-picker.js): darkness is the `dark` class on
   <html>, data-theme carries the palette id. The two base blocks below
   cover the built-ins (registry ids "Dark" and "Light" in themes.json);
   each experiment restates the roles it departs from.

   :root[data-theme] outranks both base blocks' selectors, so a block wins
   over whichever base (.dark / :root:not(.dark)) its appearance pairs
   with; variables a block omits inherit the base's. Adding a theme = one
   block here + one entry in themes.json.

   The app DEFAULTS TO DARK (matching the iced app): every HTML entry ships
   <html class="dark"> and the pre-paint script (injected by
   vite.config.ts) removes the class only when the stored preference is
   "Light". Marketing instead follows the system preference until an
   explicit choice or a dev preview is stored (base.njk's pre-paint script).
   ========================================================================= */

/* Dark — phosphor: CRT black, warm phosphor ink, broadcast primaries
   (yellow / red / blue). tokens.css screen-blends the art inks here and
   maps them straight onto these roles. */
.dark {
  --background: #0c0c0b;
  --foreground: #d8d3c6;
  --card: #141412;
  --card-foreground: #d8d3c6;
  --popover: #141412;
  --popover-foreground: #d8d3c6;
  --primary: #2d6bff;
  --primary-foreground: #ffffff;
  --secondary: #1a1a17;
  --secondary-foreground: #d8d3c6;
  --muted: #23231f;
  --muted-foreground: color-mix(in srgb, #d8d3c6 55%, transparent);
  --accent: #23231f;
  --accent-foreground: #d8d3c6;
  --destructive: #ff3b2f;
  --border: #2c2b26;
  --input: #2c2b26;
  --ring: #2d6bff;
  --chart-1: #d8d3c6;
  --chart-2: #9a968d;
  --chart-3: #716e67;
  --chart-4: #2c2b26;
  --chart-5: #141412;
  --radius: 0;
  --sidebar: #141412;
  --sidebar-foreground: #d8d3c6;
  --sidebar-primary: #2d6bff;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #23231f;
  --sidebar-accent-foreground: #d8d3c6;
  --sidebar-border: #2c2b26;
  --sidebar-ring: #2d6bff;

  /* App palette extensions */
  --success: #1fd26a;
  --warning: #ffc800;
  --danger: #ff3b2f;
  --text-strong: #f6f2e8;
  --background-weak: #141412;
  --background-strong: #2c2b26;

  /* Feature-series palette (the chart's 8 overlay slots — vivid, to glow
     off the black). Read by the island bridge (lib/themes.ts) and the
     feature-modal swatches; mirrors theme.rs's DARK_SERIES. */
  --series-1: #3a8dff;
  --series-2: #ffb000;
  --series-3: #a970ff;
  --series-4: #00d9c0;
  --series-5: #ff7a1a;
  --series-6: #c8f000;
  --series-7: #ff4fb0;
  --series-8: #6f8cff;
}

/* Light — risograph: cream paper, near-black ink. The roles that carry
   text and chart lines are tuned for reading on paper: success / danger
   (PnL) and warning (caution text) at ≥ 4.5:1 against --background, the
   series at ≥ 3:1 for thin lines (WCAG 1.4.3 / 1.4.11). The vivid
   fluorescents live on as the art inks in the next block. */
:root:not(.dark) {
  --background: #efe9da;
  --foreground: #1d1b16;
  --card: #f6f2e7;
  --card-foreground: #1d1b16;
  --popover: #f6f2e7;
  --popover-foreground: #1d1b16;
  --primary: #2350f5;
  --primary-foreground: #ffffff;
  --secondary: #e6dfcd;
  --secondary-foreground: #1d1b16;
  --muted: #e2dac6;
  --muted-foreground: color-mix(in srgb, #1d1b16 58%, transparent);
  --accent: #e2dac6;
  --accent-foreground: #1d1b16;
  --destructive: #ce1610;
  --border: #d3c9b1;
  --input: #d3c9b1;
  --ring: #2350f5;
  --chart-1: #1d1b16;
  --chart-2: #57544e;
  --chart-3: #918e85;
  --chart-4: #bcb9af;
  --chart-5: #f6f2e7;
  --radius: 0;
  --sidebar: #f6f2e7;
  --sidebar-foreground: #1d1b16;
  --sidebar-primary: #2350f5;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #e2dac6;
  --sidebar-accent-foreground: #1d1b16;
  --sidebar-border: #d3c9b1;
  --sidebar-ring: #2350f5;

  /* App palette extensions */
  --success: #00783d;
  --warning: #8e5e00;
  --danger: #ce1610;
  --text-strong: #0e0d0a;
  --background-weak: #f6f2e7;
  --background-strong: #d3c9b1;

  /* Feature-series palette — the riso hues (cyan, amber, violet, teal,
     ember, lime, pink, blue) darkened along their OKLCH hue to ≥ 3:1 on
     paper. Mirrors theme.rs's LIGHT_SERIES. */
  --series-1: #008dbe;
  --series-2: #af7900;
  --series-3: #8a5cf5;
  --series-4: #009488;
  --series-5: #d66100;
  --series-6: #708e00;
  --series-7: #e64293;
  --series-8: #4a62ff;
}

/* The built-in Light's art inks: the riso fluorescents, set explicitly so
   the series and warning above can stay tuned for legibility without
   dulling the art (--ink-4 / --ink-6 stay on danger / success, from
   tokens.css). Scoped to the built-in itself (its id, or no id at all:
   marketing following the system preference), so a light experiment's
   inks keep mapping onto its own roles. */
:root:not(.dark):not([data-theme]),
:root[data-theme="Light"]:not(.dark) {
  --ink-1: #00b4f0;
  --ink-2: #ffc400;
  --ink-3: #ff5aa8;
  --ink-5: #ff7a1a;
  --ink-7: #8a5cf5;
  --ink-8: #00b3a4;
}

/* ── Theme overrides ─────────────────────────────────────────────────────
   One block per non-built-in theme (the registry in themes.json): each
   restates the roles it departs from — the island bridge reads
   --background, --foreground, --primary, --success, --danger, --warning,
   --card, --border and --series-1..8 (lib/themes.ts), everything else
   styles the DOM. A block may also set --root-font-size (the rem basis),
   and may override tokens.css's art inks (--ink-1..8), which otherwise
   map onto its series / status roles. Fonts are NOT themed here: the dev
   font experiment owns --app-font via [data-font] blocks in the app's
   public/fonts/fonts.css, and marketing's --preview-font /
   --preview-display-font are set by its style picker. */

/* Graphite — the pre-Overprint Dark, kept whole: a neutral graphite frame,
   one blue accent. */
:root[data-theme="Graphite"] {
  --background: #121212;
  --foreground: #bcbcbc;
  --card: #181818;
  --card-foreground: #bcbcbc;
  --popover: #181818;
  --popover-foreground: #bcbcbc;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #181818;
  --secondary-foreground: #bcbcbc;
  --muted: #2e2e2e;
  --muted-foreground: color-mix(in srgb, #bcbcbc 50%, transparent);
  --accent: #2e2e2e;
  --accent-foreground: #bcbcbc;
  --destructive: #d94040;
  --border: #2e2e2e;
  --input: #2e2e2e;
  --ring: #2563eb;
  --chart-1: #bcbcbc;
  --chart-2: #888888;
  --chart-3: #666666;
  --chart-4: #2e2e2e;
  --chart-5: #181818;
  --sidebar: #181818;
  --sidebar-foreground: #bcbcbc;
  --sidebar-primary: #2563eb;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #2e2e2e;
  --sidebar-accent-foreground: #bcbcbc;
  --sidebar-border: #2e2e2e;
  --sidebar-ring: #2563eb;
  --success: #2eb86b;
  --warning: #e8a33e;
  --danger: #d94040;
  --text-strong: #e8e8e8;
  --background-weak: #181818;
  --background-strong: #2e2e2e;
  --series-1: #52b2f7;
  --series-2: #f7b869;
  --series-3: #c6a0f6;
  --series-4: #38c4bc;
  --series-5: #f78064;
  --series-6: #b2e25a;
  --series-7: #e57c99;
  --series-8: #7c9edc;
}

/* Midnight — deep blue-black, cool blues. */
:root[data-theme="Midnight"] {
  --background: #0b1220;
  --foreground: #c2cfe6;
  --card: #111b30;
  --card-foreground: #c2cfe6;
  --popover: #111b30;
  --popover-foreground: #c2cfe6;
  --primary: #4c8dff;
  --primary-foreground: #ffffff;
  --secondary: #16223a;
  --secondary-foreground: #c2cfe6;
  --muted: #182742;
  --muted-foreground: color-mix(in srgb, #c2cfe6 55%, transparent);
  --accent: #182742;
  --accent-foreground: #c2cfe6;
  --destructive: #e05252;
  --border: #223252;
  --input: #223252;
  --ring: #4c8dff;
  --success: #38c17e;
  --warning: #e8b04e;
  --danger: #e05252;
  --text-strong: #e8eefb;
  --background-weak: #111b30;
  --background-strong: #223252;
  --series-1: #5aa8ff;
  --series-2: #f2c078;
  --series-3: #c9a2ff;
  --series-4: #45d0c0;
  --series-5: #ff8f7d;
  --series-6: #a5e35e;
  --series-7: #f27eb4;
  --series-8: #82b0ec;
}

/* Espresso — warm brown-black, amber accent. */
:root[data-theme="Espresso"] {
  --background: #16110d;
  --foreground: #d2c3b2;
  --card: #1e1712;
  --card-foreground: #d2c3b2;
  --popover: #1e1712;
  --popover-foreground: #d2c3b2;
  --primary: #d29a4b;
  --primary-foreground: #201609;
  --secondary: #251c15;
  --secondary-foreground: #d2c3b2;
  --muted: #2a211a;
  --muted-foreground: color-mix(in srgb, #d2c3b2 55%, transparent);
  --accent: #2a211a;
  --accent-foreground: #d2c3b2;
  --destructive: #d4554b;
  --border: #362a20;
  --input: #362a20;
  --ring: #d29a4b;
  --success: #6fae62;
  --warning: #dfa254;
  --danger: #d4554b;
  --text-strong: #efe5d7;
  --background-weak: #1e1712;
  --background-strong: #362a20;
  --series-1: #d9a05b;
  --series-2: #b58cff;
  --series-3: #6fb3d9;
  --series-4: #d97862;
  --series-5: #a8c46a;
  --series-6: #e087a8;
  --series-7: #8fd0c0;
  --series-8: #c9b45f;
}

/* Nord — Nord's Polar Night grays with Frost accents. */
:root[data-theme="Nord"] {
  --background: #2e3440;
  --foreground: #d8dee9;
  --card: #353d4b;
  --card-foreground: #d8dee9;
  --popover: #353d4b;
  --popover-foreground: #d8dee9;
  --primary: #88c0d0;
  --primary-foreground: #2e3440;
  --secondary: #3b4252;
  --secondary-foreground: #d8dee9;
  --muted: #434c5e;
  --muted-foreground: color-mix(in srgb, #d8dee9 60%, transparent);
  --accent: #434c5e;
  --accent-foreground: #eceff4;
  --destructive: #bf616a;
  --border: #434c5e;
  --input: #434c5e;
  --ring: #88c0d0;
  --success: #a3be8c;
  --warning: #ebcb8b;
  --danger: #bf616a;
  --text-strong: #eceff4;
  --background-weak: #353d4b;
  --background-strong: #434c5e;
  --series-1: #81a1c1;
  --series-2: #8fbcbb;
  --series-3: #b48ead;
  --series-4: #ebcb8b;
  --series-5: #d08770;
  --series-6: #88c0d0;
  --series-7: #bf88b4;
  --series-8: #a0c5e8;
}

/* Solarized Dark — the classic Ethan Schoonover palette. */
:root[data-theme="Solarized Dark"] {
  --background: #002b36;
  --foreground: #93a1a1;
  --card: #073642;
  --card-foreground: #93a1a1;
  --popover: #073642;
  --popover-foreground: #93a1a1;
  --primary: #268bd2;
  --primary-foreground: #fdf6e3;
  --secondary: #0a4250;
  --secondary-foreground: #93a1a1;
  --muted: #0e4a5a;
  --muted-foreground: color-mix(in srgb, #93a1a1 60%, transparent);
  --accent: #0e4a5a;
  --accent-foreground: #eee8d5;
  --destructive: #dc322f;
  --border: #14505f;
  --input: #14505f;
  --ring: #268bd2;
  --success: #2aa198;
  --warning: #b58900;
  --danger: #dc322f;
  --text-strong: #eee8d5;
  --background-weak: #073642;
  --background-strong: #14505f;
  --series-1: #268bd2;
  --series-2: #6c71c4;
  --series-3: #d33682;
  --series-4: #2aa198;
  --series-5: #b58900;
  --series-6: #cb4b16;
  --series-7: #85d0e8;
  --series-8: #c4a0e8;
}

/* Neon — near-black with vivid magenta/cyan accents. */
:root[data-theme="Neon"] {
  --background: #0a0a12;
  --foreground: #c6c6de;
  --card: #10101c;
  --card-foreground: #c6c6de;
  --popover: #10101c;
  --popover-foreground: #c6c6de;
  --primary: #e935c1;
  --primary-foreground: #ffffff;
  --secondary: #16162a;
  --secondary-foreground: #c6c6de;
  --muted: #1c1c34;
  --muted-foreground: color-mix(in srgb, #c6c6de 55%, transparent);
  --accent: #1c1c34;
  --accent-foreground: #c6c6de;
  --destructive: #ff3b5c;
  --border: #262645;
  --input: #262645;
  --ring: #e935c1;
  --success: #00d26a;
  --warning: #ffd60a;
  --danger: #ff3b5c;
  --text-strong: #f2f2ff;
  --background-weak: #10101c;
  --background-strong: #262645;
  --series-1: #00e5ff;
  --series-2: #ff7ab8;
  --series-3: #9d6bff;
  --series-4: #ffe14d;
  --series-5: #ff9d45;
  --series-6: #4dffb8;
  --series-7: #58c7ff;
  --series-8: #b8ff5c;
}

/* Daylight — the pre-Overprint Light, kept whole: neutral white surfaces,
   black ink, one blue accent; the series are the dark hues darkened for
   white. */
:root[data-theme="Daylight"] {
  --background: #f8f8f8;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --popover: #ffffff;
  --popover-foreground: #000000;
  --primary: #2563eb;
  --primary-foreground: #ffffff;
  --secondary: #ffffff;
  --secondary-foreground: #000000;
  --muted: #dedede;
  --muted-foreground: color-mix(in srgb, #000000 50%, transparent);
  --accent: #dedede;
  --accent-foreground: #000000;
  --destructive: #d94040;
  --border: #dedede;
  --input: #dedede;
  --ring: #2563eb;
  --chart-1: #000000;
  --chart-2: #444444;
  --chart-3: #888888;
  --chart-4: #bbbbbb;
  --chart-5: #ffffff;
  --sidebar: #ffffff;
  --sidebar-foreground: #000000;
  --sidebar-primary: #2563eb;
  --sidebar-primary-foreground: #ffffff;
  --sidebar-accent: #dedede;
  --sidebar-accent-foreground: #000000;
  --sidebar-border: #dedede;
  --sidebar-ring: #2563eb;
  --success: #2eb86b;
  --warning: #e8a33e;
  --danger: #d94040;
  --text-strong: #000000;
  --background-weak: #ffffff;
  --background-strong: #dedede;
  --series-1: #156db8;
  --series-2: #b45f19;
  --series-3: #7c4dc4;
  --series-4: #118c84;
  --series-5: #c34830;
  --series-6: #789c16;
  --series-7: #b02f5a;
  --series-8: #446eb4;
}

/* Paper — warm off-white, ink text, terracotta accent. */
:root[data-theme="Paper"] {
  --background: #faf8f5;
  --foreground: #33312c;
  --card: #ffffff;
  --card-foreground: #33312c;
  --popover: #ffffff;
  --popover-foreground: #33312c;
  --primary: #c2410c;
  --primary-foreground: #ffffff;
  --secondary: #f0ece5;
  --secondary-foreground: #33312c;
  --muted: #ece7de;
  --muted-foreground: color-mix(in srgb, #33312c 55%, transparent);
  --accent: #ece7de;
  --accent-foreground: #33312c;
  --destructive: #b3311f;
  --border: #e2ddd3;
  --input: #e2ddd3;
  --ring: #c2410c;
  --success: #2f7d46;
  --warning: #a8721d;
  --danger: #b3311f;
  --text-strong: #14130f;
  --background-weak: #ffffff;
  --background-strong: #e2ddd3;
  --series-1: #0e7490;
  --series-2: #7c3aed;
  --series-3: #be185d;
  --series-4: #a16207;
  --series-5: #1d4ed8;
  --series-6: #4d7c0f;
  --series-7: #9a3412;
  --series-8: #334155;
}

/* Solarized Light — the classic palette, light face. */
:root[data-theme="Solarized Light"] {
  --background: #fdf6e3;
  --foreground: #586e75;
  --card: #fefaf0;
  --card-foreground: #586e75;
  --popover: #fefaf0;
  --popover-foreground: #586e75;
  --primary: #268bd2;
  --primary-foreground: #fdf6e3;
  --secondary: #eee8d5;
  --secondary-foreground: #586e75;
  --muted: #e8e0ca;
  --muted-foreground: color-mix(in srgb, #586e75 60%, transparent);
  --accent: #e8e0ca;
  --accent-foreground: #073642;
  --destructive: #c4302b;
  --border: #ded4b8;
  --input: #ded4b8;
  --ring: #268bd2;
  --success: #1a9a8c;
  --warning: #9c7607;
  --danger: #c4302b;
  --text-strong: #073642;
  --background-weak: #fefaf0;
  --background-strong: #ded4b8;
  --series-1: #1a6fb0;
  --series-2: #5b5bbf;
  --series-3: #b02570;
  --series-4: #17847b;
  --series-5: #8f6b00;
  --series-6: #a53c12;
  --series-7: #2e8fa8;
  --series-8: #7d5bb0;
}

/* Sepia — cream paper, brown ink. */
:root[data-theme="Sepia"] {
  --background: #f4ecdb;
  --foreground: #4a3f2e;
  --card: #faf5e9;
  --card-foreground: #4a3f2e;
  --popover: #faf5e9;
  --popover-foreground: #4a3f2e;
  --primary: #8c5a2b;
  --primary-foreground: #fff8ec;
  --secondary: #e9dfc9;
  --secondary-foreground: #4a3f2e;
  --muted: #e3d7bd;
  --muted-foreground: color-mix(in srgb, #4a3f2e 55%, transparent);
  --accent: #e3d7bd;
  --accent-foreground: #33291a;
  --destructive: #a84539;
  --border: #d6c8a8;
  --input: #d6c8a8;
  --ring: #8c5a2b;
  --success: #5f7d43;
  --warning: #a8792c;
  --danger: #a84539;
  --text-strong: #2c2414;
  --background-weak: #faf5e9;
  --background-strong: #d6c8a8;
  --series-1: #6b7fa3;
  --series-2: #8c6b9e;
  --series-3: #a3626b;
  --series-4: #4f8a7b;
  --series-5: #96702f;
  --series-6: #5d7a2f;
  --series-7: #a34f7e;
  --series-8: #3f6f8a;
}

/* Porcelain — cool gray-white, slate text, cobalt accent. */
:root[data-theme="Porcelain"] {
  --background: #f2f4f8;
  --foreground: #2e3542;
  --card: #ffffff;
  --card-foreground: #2e3542;
  --popover: #ffffff;
  --popover-foreground: #2e3542;
  --primary: #4263eb;
  --primary-foreground: #ffffff;
  --secondary: #e8ebf2;
  --secondary-foreground: #2e3542;
  --muted: #e3e7f0;
  --muted-foreground: color-mix(in srgb, #2e3542 55%, transparent);
  --accent: #e3e7f0;
  --accent-foreground: #2e3542;
  --destructive: #cf3f4a;
  --border: #dbe0ea;
  --input: #dbe0ea;
  --ring: #4263eb;
  --success: #198a5b;
  --warning: #b37a1d;
  --danger: #cf3f4a;
  --text-strong: #141922;
  --background-weak: #ffffff;
  --background-strong: #dbe0ea;
  --series-1: #1c7ed6;
  --series-2: #9c36b5;
  --series-3: #0ca678;
  --series-4: #e8590c;
  --series-5: #3b5bdb;
  --series-6: #5f3dc4;
  --series-7: #c2255c;
  --series-8: #495e8c;
}

/* Contrast — maximum-legibility light: pure white/black, heavy borders. */
:root[data-theme="Contrast"] {
  --background: #ffffff;
  --foreground: #000000;
  --card: #ffffff;
  --card-foreground: #000000;
  --popover: #ffffff;
  --popover-foreground: #000000;
  --primary: #1d4ed8;
  --primary-foreground: #ffffff;
  --secondary: #ededed;
  --secondary-foreground: #000000;
  --muted: #e6e6e6;
  --muted-foreground: color-mix(in srgb, #000000 65%, transparent);
  --accent: #e6e6e6;
  --accent-foreground: #000000;
  --destructive: #b91c1c;
  --border: #1a1a1a;
  --input: #1a1a1a;
  --ring: #1d4ed8;
  --success: #047857;
  --warning: #92400e;
  --danger: #b91c1c;
  --text-strong: #000000;
  --background-weak: #ffffff;
  --background-strong: #8a8a8a;
  --series-1: #1d4ed8;
  --series-2: #6b21a8;
  --series-3: #9d174d;
  --series-4: #0f766e;
  --series-5: #c2410c;
  --series-6: #3f6212;
  --series-7: #7e22ce;
  --series-8: #334155;
}