/* AI Wrapped design tokens — the single source of truth for the public site and the app.
   Two surfaces share one system: a warm light "shell" (site, import, report, account)
   and an immersive dark "stage" (story, map, chat). Components read semantic roles only;
   the .stage scope swaps the role values, never the component CSS. */
:root {
  color-scheme: light;

  /* ── Typography ── */
  --font: 'Outfit', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-display: var(--font);
  --mono: 'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --text-2xs: 0.6875rem;  /* 11 */
  --text-xs: 0.75rem;     /* 12 */
  --text-sm: 0.875rem;    /* 14 */
  --text-md: 1rem;        /* 16 */
  --text-lg: 1.125rem;    /* 18 */
  --text-xl: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --text-3xl: clamp(1.875rem, 1.4rem + 2vw, 2.75rem);
  --text-4xl: clamp(2.25rem, 1.5rem + 3.4vw, 3.75rem);
  --text-5xl: clamp(2.75rem, 1.6rem + 5.4vw, 5.25rem);
  --leading-tight: 1.08;
  --leading-snug: 1.3;
  --leading-body: 1.6;
  --tracking-tight: -0.03em;
  --tracking-caps: 0.12em;

  /* ── Space (4px grid) ── */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px;
  --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px;
  --gutter: clamp(16px, 4vw, 32px);
  --content-width: 1120px;
  --reading-width: 720px;

  /* ── Shape & depth ── */
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-pill: 999px;
  --shadow-1: 0 1px 2px rgb(29 24 32 / 0.06), 0 1px 1px rgb(29 24 32 / 0.04);
  --shadow-2: 0 4px 16px rgb(29 24 32 / 0.08), 0 1px 3px rgb(29 24 32 / 0.06);
  --shadow-3: 0 18px 48px rgb(29 24 32 / 0.14), 0 4px 12px rgb(29 24 32 / 0.08);
  --shadow-dialog: 0 24px 80px rgb(21 16 29 / 0.24);

  /* ── Motion ── */
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-1: 120ms; --dur-2: 200ms; --dur-3: 320ms; --dur-4: 520ms; --dur-5: 900ms;

  /* ── Layers ── */
  --z-base: 1; --z-sticky: 20; --z-overlay: 60; --z-dialog: 100; --z-toast: 120;

  /* ── Brand ── */
  --brand-violet: #6b4fd8;
  --brand-pink: #d2457f;
  --brand-amber: #e39a2d;
  --brand-gradient: linear-gradient(120deg, #6b4fd8 0%, #b0479f 48%, #e3843a 100%);
  --brand-gradient-soft: linear-gradient(120deg, rgb(107 79 216 / 0.12), rgb(210 69 127 / 0.10) 50%, rgb(227 154 45 / 0.10));

  /* ── Shell roles (light) ── */
  --bg: #efebe5;
  --bg-elevated: #f7f5f1;
  --surface: #f7f5f1;
  --surface-raised: #fffdfa;
  --surface-sunken: #e7e2db;
  --ink: #1d1820;
  --ink-2: #554d5b;
  --ink-3: #7c7482;
  --line: rgb(29 24 32 / 0.10);
  --line-strong: rgb(29 24 32 / 0.18);
  --accent: #5b3fc9;
  --accent-ink: #ffffff;
  --accent-soft: rgb(91 63 201 / 0.10);
  --focus: #5b3fc9;
  --link: #4c33b0;
  --button-bg: #1d1820;
  --button-ink: #fffdfa;
  --button-hover: #322a37;
  --scrim: rgb(21 16 29 / 0.55);

  /* ── Status (reserved: never a series color; always with icon + label) ── */
  --good: #13795b; --warning: #a35f00; --serious: #c2410c; --critical: #b42318;

  /* ── Chart roles (light). Validated categorical order; see dataviz palette. ── */
  --series-1: #2a78d6; --series-2: #eb6834; --series-3: #1baf7a; --series-4: #eda100;
  --series-5: #e87ba4; --series-6: #008300; --series-7: #4a3aa7; --series-8: #e34948;
  --series-other: #9a948f;
  --seq-1: #cde2fb; --seq-2: #9ec5f4; --seq-3: #6da7ec; --seq-4: #3987e5; --seq-5: #256abf; --seq-6: #184f95;
  --chart-grid: rgb(29 24 32 / 0.08);
  --chart-axis: rgb(29 24 32 / 0.28);
  --chart-track: rgb(29 24 32 / 0.07);
  /* Category → fixed series slot. Color follows the category, never its rank. */
  --category-coding: var(--series-1); --category-writing: var(--series-2); --category-research: var(--series-3);
  --category-business: var(--series-4); --category-creative: var(--series-5); --category-personal: var(--series-6);
  --category-work: var(--series-7); --category-math_science: var(--series-8); --category-other: var(--series-other);
  --provider-chatgpt: #10a37f; --provider-claude: #d97757; --provider-gemini: #4285f4; --provider-markdown: #7c7482; --provider-unknown: #8b8b8b;

  /* ── Stage values (also used by canvas code via token('stage-…')) ── */
  --stage-bg: #0c0b12;
  --stage-surface: #15131f;
  --graph-background: #07060b;

  /* ── Legacy aliases: older public pages still reference these names. ── */
  --text: var(--ink); --text-dim: var(--ink-2); --text-muted: var(--ink-3); --dim: var(--ink-2); --muted: var(--ink-3);
  --bg-card: var(--surface); --bg-panel: var(--surface-sunken); --bg-glass: rgb(247 245 241 / 0.86); --card: var(--surface);
  --bg-slide: var(--stage-bg); --bg-slide-card: var(--stage-surface);
  --font-body: var(--font);
  --purple: var(--accent); --pink: var(--brand-pink); --teal: var(--series-3); --amber: var(--brand-amber);
  --sky: var(--series-1); --lime: var(--series-6); --rose: var(--series-8); --fuchsia: #a4447f; --mint: var(--series-3);
  --grad-1: var(--brand-gradient); --grad-2: var(--brand-gradient); --grad-3: var(--brand-gradient);
  --grad-4: var(--brand-gradient); --grad-5: var(--brand-gradient); --grad-6: var(--brand-gradient);
  --titanium-base: var(--surface-sunken); --titanium-light: var(--surface-raised); --titanium-dark: var(--line-strong);
  --titanium-surface: var(--surface-raised); --titanium-iridescent: var(--brand-gradient-soft); --titanium-specular: rgb(255 255 255 / 0.6);
  --brushed-metal: none; --metal-noise: none; --spec-sweep: none; --spec-sweep-strong: none; --spec-sweep-dark: none;
  --clip-card: none; --clip-card-sm: none; --clip-btn: none; --clip-pill: none; --clip-vent: none;
  --story-text: #f3f1f8; --story-text-dim: #b8b2c8; --story-text-muted: #8c859e;
  --story-panel: #1b1828; --story-glass: rgb(18 16 30 / 0.88);
  --story-purple: #9085e9; --story-pink: #d55181; --story-teal: #199e70; --story-amber: #c98500;
  --story-sky: #3987e5; --story-fuchsia: #d55181; --story-lime: #008300; --story-rose: #e66767;
  --border: var(--line-strong);
}

/* ── Stage (dark) — story, map, chat. Same roles, stepped for the dark surface. ── */
.stage {
  color-scheme: dark;
  --bg: #0c0b12;
  --bg-elevated: #15131f;
  --surface: #15131f;
  --surface-raised: #1e1b2c;
  --surface-sunken: #0a0910;
  --ink: #f3f1f8;
  --ink-2: #b8b2c8;
  --ink-3: #8c859e;
  --line: rgb(255 255 255 / 0.09);
  --line-strong: rgb(255 255 255 / 0.16);
  --accent: #a597ff;
  --accent-ink: #120f1d;
  --accent-soft: rgb(165 151 255 / 0.14);
  --focus: #b9adff;
  --link: #c2b8ff;
  --button-bg: #f3f1f8;
  --button-ink: #120f1d;
  --button-hover: #ffffff;
  --scrim: rgb(5 4 9 / 0.7);
  --good: #3ccf91; --warning: #f0b33c; --serious: #f2804a; --critical: #f26d6d;
  --series-1: #3987e5; --series-2: #d95926; --series-3: #199e70; --series-4: #c98500;
  --series-5: #d55181; --series-6: #008300; --series-7: #9085e9; --series-8: #e66767;
  --series-other: #6f6a7c;
  --chart-grid: rgb(255 255 255 / 0.07);
  --chart-axis: rgb(255 255 255 / 0.3);
  --chart-track: rgb(255 255 255 / 0.07);
  --shadow-2: 0 6px 24px rgb(0 0 0 / 0.35);
  --shadow-3: 0 24px 64px rgb(0 0 0 / 0.5);
  /* Custom properties resolve where declared, so stage-derived roles are re-declared here. */
  --category-coding: var(--series-1); --category-writing: var(--series-2); --category-research: var(--series-3);
  --category-business: var(--series-4); --category-creative: var(--series-5); --category-personal: var(--series-6);
  --category-work: var(--series-7); --category-math_science: var(--series-8); --category-other: var(--series-other);
  --text: var(--ink); --text-dim: var(--ink-2); --text-muted: var(--ink-3); --dim: var(--ink-2); --muted: var(--ink-3);
  --bg-card: var(--surface); --bg-panel: var(--surface-sunken); --card: var(--surface); --border: var(--line-strong);
  --purple: var(--accent);
}