/*
 * css/tokens.css: the colour tokens of SPEC 2, nothing else. Every colour on the site comes from here.
 * Dark is the default. Light is applied by js/shell/theme-boot.js from localStorage['poncho.theme'] before paint.
 * Always-dark surfaces (the home stage, the footer CTA band) carry data-theme="dark" in both themes; so does the
 * home header while it overlays the stage. tools/verify.mjs parses the two blocks below and recomputes every
 * contrast pair, so keep one declaration per line and hex values for the text and ground tokens.
 * The --spec-* spectrum belongs to the mark, the category chips and the charts. The interface itself is the blue.
 */

/* dark */
:root,
[data-theme="dark"],
html[data-stage] .site-header:not([data-header="page"]) {
  color-scheme: dark;
  --bg: #08080b;
  --bg-deep: #050507;
  --panel: #101015;
  --panel-2: #18181f;
  --panel-3: #0c0c11;
  --line: #22222b;
  --line-row: #1c1c24;
  --line-strong: #32323e;
  --line-input: #6a6a7a;
  --text: #f2f2f6;
  --dim: #cbcbd6;
  --body: #a7a7b6;
  --muted: #91919f;
  --faint: #84848f;
  --accent: #2e9bff;
  --accent-tint: #0e1a2b;
  --accent-line: #1e4b7a;
  --action: #2e9bff;
  --action-hover: #57b0ff;
  --on-action: #04101f;
  --danger: #ff8a80;
  --danger-tint: #24100f;
  --warn: #e8b44a;
  --focus: #2e9bff;
  --glow: rgba(46, 155, 255, .28);
  --scrim: rgba(4, 4, 6, .74);

  --spec-amber: #ffa51f;
  --spec-magenta: #f4247c;
  --spec-red: #ee3b41;
  --spec-blue: #2e9bff;
  --spec-cyan: #22d3ff;
  --spec-violet: #7a4cf5;
  --spec-slate: #7c8794;

  --series-1: #2e9bff;
  --series-2: #22d3ff;
  --series-3: #ffa51f;
  --series-4: #cbcbd6;
  --series-other: #7c8794;

  --hero-2nd: rgba(242, 242, 246, .60);
  --header-glass: rgba(8, 8, 11, .92);
  --term-glass: rgba(16, 16, 21, .86);
  --glow-soft: rgba(46, 155, 255, .10);
  --shadow-pop: 0 24px 60px rgba(0, 0, 0, .58);
  --shadow-card: inset 0 1px 0 rgba(242, 242, 246, .04);
  --shadow-action: 0 2px 14px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .20);
  --ring: 0 0 0 3px var(--accent-tint);
}

/* light */
[data-theme="light"] {
  color-scheme: light;
  --bg: #f6f6f9;
  --bg-deep: #ececf2;
  --panel: #ffffff;
  --panel-2: #eeeef4;
  --panel-3: #fafafd;
  --line: #dedee7;
  --line-row: #e8e8ef;
  --line-strong: #c5c5d2;
  --line-input: #78788a;
  --text: #0c0c12;
  --dim: #26262f;
  --body: #3b3b48;
  --muted: #4f4f5e;
  --faint: #5a5a6a;
  --accent: #1461cc;
  --accent-tint: #e9f0fc;
  --accent-line: #a8c6ee;
  --action: #1461cc;
  --action-hover: #0f4fa9;
  --on-action: #ffffff;
  --danger: #c22127;
  --danger-tint: #fbeaea;
  --warn: #7a5300;
  --focus: #1461cc;
  --glow: rgba(20, 97, 204, .16);
  --scrim: rgba(12, 12, 18, .42);

  --spec-amber: #b86a00;
  --spec-magenta: #c4145f;
  --spec-red: #c22127;
  --spec-blue: #1668d6;
  --spec-cyan: #0e7c96;
  --spec-violet: #5a2cd6;
  --spec-slate: #5a6675;

  --series-1: #1461cc;
  --series-2: #0e7c96;
  --series-3: #7a5300;
  --series-4: #26262f;
  --series-other: #5a6675;

  --hero-2nd: rgba(12, 12, 18, .62);
  --header-glass: rgba(246, 246, 249, .92);
  --term-glass: rgba(255, 255, 255, .86);
  --glow-soft: rgba(20, 97, 204, .06);
  --shadow-pop: 0 24px 48px -24px rgba(12, 12, 18, .28);
  --shadow-card: 0 1px 2px rgba(12, 12, 18, .06);
  --shadow-action: 0 2px 14px var(--glow), inset 0 1px 0 rgba(255, 255, 255, .18);
  --ring: 0 0 0 3px var(--accent-tint);
}