/* ─────────────────────────────────────────────────────────────
   DESIGN TOKENS — the ONLY file that contains colours, fonts,
   radii and spacing values. Every other stylesheet uses var(--…).
   Change --color-accent here and every button, link, focus ring,
   badge and highlighted result changes with it.
   Load order (set once in worker/layout.js):
     tokens.css → base.css → components.css
   Theme: "Chart-led" (board 8), chosen 24 Oct 2026.
   ───────────────────────────────────────────────────────────── */

:root {
  /* Core palette — light mode */
  --color-bg: #F4F6F8;               /* also in worker/layout.js FIRST_PAINT_CSS */
  --color-surface: #FFFFFF;
  --color-surface-2: #F9FAFB;       /* inputs, quiet panels */
  --color-text: #101828;
  --color-muted: #475467;
  --color-label: #344054;
  --color-border: #E4E7EC;
  --color-input-border: #D0D5DD;
  --color-accent: #0F766E;          /* teal */
  --color-accent-contrast: #FFFFFF; /* text on accent */
  --color-accent-strong: #0A5550;   /* accent text on soft accent */
  --color-accent-soft: #D5F0EC;
  --color-accent-faint: #E6F4F2;
  --color-danger: #C0362C;
  --color-warning: #9A5B00;
  --color-star: #E3A008;            /* a favourited star */
  --color-chart-1: #9FD8D1;         /* first part of a bar or chart */
  --color-chart-2: #0F766E;         /* second part (usually the "result" part) */

  /* Derived — follow the palette above automatically */
  --color-accent-hover: color-mix(in srgb, var(--color-accent) 85%, var(--color-text));
  --color-focus: color-mix(in srgb, var(--color-accent) 40%, transparent);
  --color-warning-soft: color-mix(in srgb, var(--color-warning) 12%, transparent);

  /* Type: Manrope for headings, numbers and labels, Atkinson Hyperlegible
     (built for legibility) for everything you read. Self-hosted in
     /fonts, so no third-party requests. */
  --font-heading: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-body: "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-sans: var(--font-body);
  --font-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --text-xs: 0.8125rem;
  --text-sm: 0.875rem;
  --text-base: 1.0625rem;           /* 17px body */
  --text-md: 1.0625rem;
  --text-lg: 1.375rem;
  --text-xl: clamp(1.75rem, 4.5vw, 2.25rem);
  --text-result: clamp(2.25rem, 7vw, 3rem);

  /* Shape & space */
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 16px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 40px;
  --content-width: 1160px;
  --prose-width: 70ch;
  --shadow-card: 0 1px 2px rgb(16 24 40 / 0.04);
  --shadow-bar: 0 -6px 20px rgb(16 24 40 / 0.18);
}

/* Dark mode. <html data-theme="dark"> switches it on. A tiny script at the
   top of every page (layout.js) sets data-theme before anything draws:
   the visitor's own choice from the header toggle if they've made one,
   otherwise their phone or computer setting. */
:root { color-scheme: light; }
:root[data-theme="dark"] {
  color-scheme: dark;
  --color-bg: #0E1416;
  --color-surface: #162024;
  --color-surface-2: #1C282C;
  --color-text: #E8EEF0;
  --color-muted: #A3B3B8;
  --color-label: #C8D3D6;
  --color-border: #26353A;
  --color-input-border: #3A4D53;
  --color-accent: #2DD4BF;
  --color-accent-contrast: #052A26;
  --color-accent-strong: #7DEBDC;
  --color-accent-soft: #123C38;
  --color-accent-faint: #10302D;
  --color-danger: #FF8A80;
  --color-warning: #F2B84B;
  --color-star: #F5C542;
  --color-chart-1: #2A5B57;
  --color-chart-2: #2DD4BF;
  --shadow-card: none;
  --shadow-bar: 0 -6px 20px rgb(0 0 0 / 0.5);
}