/* Stats&Market · design tokens v2
   Loaded after product.css so it wins the cascade. In v18 the values in design-tokens.css were dead code:
   swiss-grid.css and product.css redefined the same variables later, and theme-color (#090909) no longer
   matched the real canvas (#111110). This file is the single source of truth.

   Structure follows the Gr8r reference; every surface is ~40% darker than it.
   The 12 semantic hues are OKLCH-tuned: >= 6.9:1 on the canvas and card surfaces (>= 5.5:1 on the selected-row
   surface), and each sits 0.04-0.17 (ΔE ok) away from the matching macOS system colour; cyan is the closest at 0.043.
   Run tools/palette-check.py to re-measure after any change. Colour is never the only carrier of meaning:
   labels, signs and shapes stay on every state. */

:root,
body.dark,
.dark-island {
  color-scheme: dark;
  --font-sans: Geist, ui-sans-serif, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  /* neutrals. --side is the second neutral layer (sidebar / rails), darker than the content canvas */
  --side: #080808;
  --canvas: #0c0c0b;
  --surface: #121211;
  --panel: #161615;
  --raised: #1c1c1a;
  --hover: #20201e;
  --selected: #282826;
  --border: #232321;
  --border-strong: #363531;
  --divider: #1a1a18;
  --text: #ecebe6;
  --secondary: #c3c1ba;
  --muted: #a09d96;
  --subtle: #8b8882;
  --faint: #64615b; /* decorative only, below 4.5:1 */
  --overlay: rgba(0, 0, 0, .66);
  --control-fill: #161615;
  --control-hover: #20201e;

  /* brand + selection: saturated, used sparingly (primary action, current selection, focus) */
  --accent: #8c97ff;
  --accent-ink: #0d0e1d;
  --accent-soft: color-mix(in srgb, var(--accent) 13%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 42%, transparent);
  --action: var(--accent);
  --action-ink: var(--accent-ink);
  --control-active: color-mix(in srgb, var(--accent) 20%, var(--raised));
  --control-active-ink: var(--text);

  /* twelve semantic hues */
  --sem-red: #f27978;
  --sem-orange: #fb9a5c;
  --sem-yellow: #eacc56;
  --sem-green: #6bd586;
  --sem-mint: #80ebc4;
  --sem-teal: #54b9b1;
  --sem-cyan: #62d4e3;
  --sem-blue: #74affd;
  --sem-indigo: #9695f3;
  --sem-purple: #c68fe7;
  --sem-pink: #f592be;
  --sem-brown: #c5a27d;
  --positive: var(--sem-green);
  --negative: var(--sem-red);
  --blue: var(--sem-blue);

  /* shape, depth, layout */
  --radius: 8px;
  --radius-sm: 6px;
  --radius-lg: 12px;
  --shadow-pop: 0 20px 48px -16px rgba(0, 0, 0, .8), 0 6px 14px -6px rgba(0, 0, 0, .55), 0 0 0 1px var(--border-strong);
  --sidebar-width: 232px;
  --header-height: 48px;
  --grid-gap: 12px;
  --section-pad: 14px;
  --ease: cubic-bezier(.23, 1, .32, 1);
}

body.light {
  color-scheme: light;
  --side: #f1f0ec;
  --canvas: #f7f6f3;
  --surface: #ffffff;
  --panel: #faf9f6;
  --raised: #ffffff;
  --hover: #f0eee9;
  --selected: #e8e6e0;
  --border: #e6e3dd;
  --border-strong: #d0cdc5;
  --divider: #efede8;
  --text: #1d1c1a;
  --secondary: #4a4742;
  --muted: #66625c;
  --subtle: #75716a;
  --faint: #a29e96;
  --overlay: rgba(24, 22, 19, .34);
  --control-fill: #faf9f6;
  --control-hover: #f0eee9;
  --accent: #4b5bd6;
  --accent-ink: #ffffff;
  --control-active: color-mix(in srgb, var(--accent) 12%, var(--surface));
  --control-active-ink: var(--text);
  --sem-red: #9f4041;
  --sem-orange: #a75b26;
  --sem-yellow: #766200;
  --sem-green: #207d3f;
  --sem-mint: #0d7b62;
  --sem-teal: #137171;
  --sem-cyan: #21748c;
  --sem-blue: #3564a1;
  --sem-indigo: #5b59a2;
  --sem-purple: #794e92;
  --sem-pink: #91466a;
  --sem-brown: #7c5c39;
  --shadow-pop: 0 18px 40px -14px rgba(28, 25, 20, .22), 0 4px 10px -4px rgba(28, 25, 20, .1), 0 0 0 1px var(--border-strong);
}

/* tone vocabulary (state, provenance, freshness). Every tone also carries a text label in the UI */
[data-tone] { --tone-soft: color-mix(in srgb, var(--tone) 12%, transparent); --tone-line: color-mix(in srgb, var(--tone) 34%, transparent); }
[data-tone=error]      { --tone: var(--sem-red); }
[data-tone=warning]    { --tone: var(--sem-orange); }
[data-tone=caution]    { --tone: var(--sem-yellow); }
[data-tone=success]    { --tone: var(--sem-green); }
[data-tone=live]       { --tone: var(--sem-mint); }
[data-tone=reference]  { --tone: var(--sem-teal); }
[data-tone=official]   { --tone: var(--sem-cyan); }
[data-tone=info]       { --tone: var(--sem-blue); }
[data-tone=published]  { --tone: var(--sem-indigo); }
[data-tone=modeled]    { --tone: var(--sem-purple); }
[data-tone=action]     { --tone: var(--accent); }
[data-tone=historical] { --tone: var(--sem-brown); }
[data-tone=cached]     { --tone: var(--sem-blue); }
[data-tone=favorite]   { --tone: var(--sem-pink); }

/* topic hues: adjacent navigation items never share a hue.
   :is(body.dark, body.light) matches the specificity of the old style.css rule that pinned every topic to the accent */
:is(body.dark, body.light) .topic-population { --topic-color: var(--sem-teal); }
:is(body.dark, body.light) .topic-health { --topic-color: var(--sem-pink); }
:is(body.dark, body.light) .topic-economy { --topic-color: var(--sem-yellow); }
:is(body.dark, body.light) .topic-energy { --topic-color: var(--sem-orange); }
:is(body.dark, body.light) .topic-environment { --topic-color: var(--sem-green); }
:is(body.dark, body.light) .topic-food { --topic-color: var(--sem-brown); }
:is(body.dark, body.light) .topic-technology { --topic-color: var(--sem-purple); }
:is(body.dark, body.light) .topic-education { --topic-color: var(--sem-blue); }