/* ── Shared design tokens — canonical source for every surface ─────────────
 *
 * This file is the single source of truth for the site's colour scale,
 * consumed by:
 *   • Demo/challenge pages (agentic-demo, tokenizer, sampling, attention,
 *     hallucination, vectors, challenge, prompt-injection, compare)
 *   • shared/site-header.css (top nav + footer)
 *   • docs/index.html (via docs/docsify-overrides.css, which maps
 *     docsify-themeable var names onto these)
 *   • radars/<name>/custom.css (via shared/radar-theme.css, which maps AOE var
 *     names onto these)
 *   • index.html (landing page)
 *
 * Token naming — we keep the legacy names from `variables.css` so existing
 * demo pages continue to work unchanged. New tokens added here should follow
 * the same semantic-role convention (--bg, --surface, --accent, --muted…),
 * not a raw colour scale.
 *
 * When you add a token:
 *   1. Define it in both :root (dark) and html[data-theme="light"].
 *   2. `scripts/validate-tokens.js` enforces that the two blocks stay in sync.
 *   3. Cache-bust — bump the cache-bust stamp in files that reference this
 *      file so users see the change after deploy.
 *
 * See AGENTS.md → "Editing shared/tokens.css" for the full checklist.
 * ───────────────────────────────────────────────────────────────────────── */

/* Dark mode is declared on both :root (matches when no data-theme is set,
 * i.e. JS hasn't run yet) and html[data-theme="dark"] (matches when dark
 * mode is explicitly selected). The attribute selector has higher specificity
 * (0,0,1,1) than :root (0,0,1,0), so it always wins when dark is active.
 * This prevents the recurring bug where dark-mode styles stop applying once
 * JS sets data-theme="dark" explicitly on the html element. */
:root,
html[data-theme="dark"] {
  /* ── Surfaces ──────────────────────────────────────────────────────── */
  --bg: #0f1117;            /* page background                           */
  --surface: #1a1d27;       /* card/panel background                     */
  --surface-2: #22253a;     /* raised card background, hover bg          */
  --border: #2d3148;        /* subtle divider                            */

  /* ── Text ──────────────────────────────────────────────────────────── */
  --text: #e2e8f0;          /* body text                                 */
  --muted: #8892a4;          /* secondary text, captions                  */

  /* ── Accents (semantic) ────────────────────────────────────────────── */
  --accent: #5ba300;        /* primary brand green (matches AOE Adopt)   */
  --accent-2: #009eb0;      /* teal — Assess / info                      */
  --accent-3: #7b5ea7;      /* purple — Deep Dive                        */
  --accent-4: #c97a2e;      /* amber — Trial / warning                   */
  --accent-5: #c73e3e;      /* red — Hold / danger                       */

  /* ── Code ──────────────────────────────────────────────────────────── */
  --code-bg: #151820;
  --code-text: #c9d1d9;

  /* ── Misc ──────────────────────────────────────────────────────────── */
  --highlight: rgba(91,163,0,0.12);

  /* ── Token palette (agentic-demo) ──────────────────────────────────── */
  --token-system: #7b5ea7;
  --token-agents: #5ba300;
  --token-skills: #c97a2e;
  --token-files: #009eb0;
  --token-tools: #c73e3e;
  --token-prompt: #e2e8f0;
  --token-response: #50a0ff;

  /* ── Medal palette (landscape rankings) ────────────────────────────── */
  --gold: #f5c842;
  --silver: #c0c0c0;
  --bronze: #cd7f32;

  /* ── Semantic aliases ──────────────────────────────────────────────── */
  --danger: #c73e3e;
  --success: #5ba300;
  --warning: #c97a2e;

  /* ── Site chrome (shared header/footer) ──────────────────────────────
   * Kept opaque (not translucent) so text is legible regardless of what's
   * behind the bar. backdrop-filter blur is decorative only — never a
   * substitute for contrast. The bg sits ~3 shades brighter than --bg in
   * dark mode so the bar reads as a distinct surface, not a continuation
   * of the page background. */
  --chrome-bg: #1e2330;                        /* clearly lifted from --bg #0f1117 */
  --chrome-border: rgba(255, 255, 255, 0.18);  /* visible 1px edge */
  --chrome-text: #f5f7fa;
  --chrome-text-muted: #a8b3c5;
  --chrome-hover: rgba(255, 255, 255, 0.08);
  --chrome-height: 48px;
}

html[data-theme="light"] {
  --bg: #f8f9fc;
  --surface: #ffffff;
  --surface-2: #f0f2f7;
  --border: #e2e5ec;

  --text: #1a1d27;
  --muted: #5c6478;

  --accent: #4a8a00;
  --accent-2: #007d8f;
  --accent-3: #6b4e97;
  --accent-4: #b06a20;
  --accent-5: #b33030;

  --code-bg: #f5f7fa;
  --code-text: #24292f;

  --highlight: rgba(91,163,0,0.08);

  --token-system: #6b4e97;
  --token-agents: #4a8a00;
  --token-skills: #b06a20;
  --token-files: #007d8f;
  --token-tools: #b33030;
  --token-prompt: #1a1d27;
  --token-response: #0969da;

  --gold: #d4a800;
  --silver: #8a8a8a;
  --bronze: #a86928;

  --danger: #b33030;
  --success: #4a8a00;
  --warning: #b06a20;

  --chrome-bg: #ffffff;                         /* opaque white for high contrast */
  --chrome-border: rgba(0, 0, 0, 0.12);
  --chrome-text: #0f1117;                       /* near-black brand */
  --chrome-text-muted: #3d4458;                 /* nav items — much darker than before */
  --chrome-hover: rgba(0, 0, 0, 0.05);
  --chrome-height: 48px;
}