/* ══════════════════════════════════════════════════════════════════════════
   tokens.css — the single source of truth for Gooviral's design system.

   Extracted from index.html's <style> block on 2026-07-29 (Story 1.8), as the
   D4 carve-out to AD-17. Linked by BOTH index.html and /calendar so a rebrand
   cannot leave one page behind.

   ⚠️ Calendar CSS declares NO token of its own — it consumes this file.
      Any new colour, type, shape or elevation value is added HERE first.

   Values are byte-identical to the block they replaced; the extraction was
   verified by comparing browser-computed values for all 30 tokens in both
   themes before and after (frontend/tests/capture_tokens.py).
   ══════════════════════════════════════════════════════════════════════════ */

/* ══ Material Design 3 — Expressive token system ══ */
:root {
  /* M3 palette — brand #e11e1e */
  --md-primary: #E11E1E; --md-primary-dark: #B01515;
  --md-primary-container: #4A0000; --md-on-primary-container: #FFDAD6;
  --md-secondary-container: #32007A; --md-on-secondary-container: #E8DDFF;
  --md-tertiary-container: #5A2F00; --md-on-tertiary-container: #FFDCBB;

  /* Mapped to legacy names the components/JS use */
  --red: #E11E1E; --red-dark: #B01515; --red-light: #F04444;
  --red-muted: rgba(225,30,30,0.10);
  --bg: #0D0B14; --surface: #201D2A; --surface2: #2B2836; --surface3: #36323F;
  --border: #49454F; --text: #EDE8F4; --text-muted: #C9C3D0; --text-dim: #938C9B;
  --green: #69DB7C; --yellow: #FFD43B; --blue: #74B9FF; --purple: #B39DDB;

  /* M3 elevation shadows */
  --md-elev-1: 0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --md-elev-2: 0 3px 8px rgba(0,0,0,0.45), 0 2px 4px rgba(0,0,0,0.3);
  --md-elev-3: 0 10px 30px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.35);
  --shape-l: 24px; --shape-m: 16px; --shape-s: 12px;

  /* Set inline by calendar-screen.js from the reel's arc_role (Story 4.1).
     Default is --border so an unknown role still renders a visible rule. */
  --arc-colour: var(--border);
}
[data-theme="light"] {
  --md-primary: #E11E1E; --md-primary-dark: #B01515;
  --md-primary-container: #FFDAD6; --md-on-primary-container: #410002;
  --md-secondary-container: #E8DDFF; --md-on-secondary-container: #21005D;
  --md-tertiary-container: #FFDCBB; --md-on-tertiary-container: #2B1700;

  --red: #E11E1E; --red-dark: #B01515; --red-light: #F04444;
  --red-muted: rgba(225,30,30,0.08);
  --bg: #F6F2FA; --surface: #FFFFFF; --surface2: #F1ECF7; --surface3: #E7E0EF;
  --border: #CAC4D0; --text: #1C1B1F; --text-muted: #49454F; --text-dim: #79747E;
  --green: #2E7D32; --yellow: #F59E0B; --blue: #1565C0; --purple: #6750A4;

  --md-elev-1: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.08);
  --md-elev-2: 0 3px 8px rgba(0,0,0,0.14), 0 2px 4px rgba(0,0,0,0.08);
  --md-elev-3: 0 10px 30px rgba(0,0,0,0.16), 0 4px 10px rgba(0,0,0,0.1);
  --arc-colour: var(--border);
}