/*
  CXO Republic design tokens v2 (2026-10-14): Noir and gold.
  Canonical source: the "CXO Republic" design system artifact,
  https://claude.ai/artifact/YXXqhBQqYWbsEaVj6TuPLo (project/tokens.json).
  Rules in prose: 07 Wiki/Brand System.md.
  A copy lives at 09 Website/site/assets/tokens.css. Change both together.

  Noir is the house look. White (class="theme-white") is for printed workbooks and handouts only.
*/

@import url("https://fonts.googleapis.com/css2?family=Jost:wght@200;300;400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  /* Design system color tokens (Noir) */
  --surface: #0a0a0a;          /* page and slide background */
  --surface-glow: #1f1c17;     /* centre of the radial vignette */
  --surface-raised: #151412;   /* panels, cards, prompt blocks */
  --ink: #f7f4ee;              /* body copy and subtitles */
  --ink-muted: #a8a296;        /* captions, sources, secondary lines */
  --gold-light: #f2dca0;       /* champagne: first gradient stop, pearl highlight */
  --gold: #d4af5a;             /* line art, outlines, thin numerals (text 24px+ only) */
  --gold-dark: #a57c2c;        /* bronze: last stop of the text gradient */
  --gold-deep: #e2c47f;        /* gold at body size: eyebrows, links, labels */
  --gold-line: rgba(212, 175, 90, 0.55); /* 1px panel outlines */
  --gold-wash: #1f1a10;        /* AI output and key-insight ground */
  --on-gold: #0a0a0a;          /* text on a gold fill. Never white on gold. */
  --focus: var(--gold-light);  /* 2px focus outline, 3px offset */

  /* The only gradients in the system */
  --gold-text-gradient: linear-gradient(100deg, var(--gold-light) 0%, var(--gold) 45%, var(--gold-dark) 100%);
  --gold-fill-gradient: linear-gradient(100deg, var(--gold-light) 0%, var(--gold) 100%);
  --vignette: radial-gradient(ellipse at 50% 40%, var(--surface-glow), var(--surface) 72%);

  /* Shadows */
  --glow-gold: 0 0 28px rgba(212, 175, 90, 0.18);
  --glow-pearl: 0 0 16px rgba(242, 220, 160, 0.45);

  /* Type: one family (Jost) plus IBM Plex Mono for prompts */
  --font-display: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-sans: "Jost", "Futura", "Century Gothic", sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, Menlo, monospace;

  /* Type scale (design system styles) */
  --display-size: clamp(2.5rem, 6vw, 3.5rem);  /* 56px, Jost 600 caps, 0.04em, gold gradient */
  --headline-size: clamp(1.625rem, 3.5vw, 2rem); /* 32px, Jost 600 caps, 0.04em, gold gradient */
  --numeral-size: 4.5rem;                      /* 72px, Jost 200, gold */
  --stat-size: 3.5rem;                         /* 56px, Jost 200, gold */
  --subtitle-size: 1.25rem;                    /* 20px, Jost 300, ink */
  --title-size: 1.125rem;                      /* 18px, Jost 500, 0.02em */
  --eyebrow-size: 0.75rem;                     /* 12px, Jost 500 caps, 0.2em, gold-deep */
  --body-size: 1rem;                           /* 16px / 26px, max 65ch */
  --caption-size: 0.8125rem;                   /* 13px, ink-muted */
  --prompt-size: 0.875rem;                     /* 14px Plex Mono */

  /* Space */
  --space-xs: 8px;
  --space-sm: 16px;
  --space-md: 32px;
  --space-lg: 64px;

  /* Radius */
  --radius-sm: 8px;
  --radius-lg: 20px;
  --radius-pill: 999px;

  /* Layout and motion */
  --container: 1120px;
  --measure: 65ch;
  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);

  /* Semantic aliases kept for older markup */
  --bg: var(--surface);
  --text: var(--ink);
  --text-muted: var(--ink-muted);
  --border: var(--gold-line);
  --accent: var(--gold-deep);
  --accent-contrast: var(--on-gold);
  --font-body: var(--font-sans);
  --font-label: var(--font-sans);
}

/* White: printed workbooks and handouts only */
.theme-white {
  --surface: #ffffff;
  --surface-glow: #f5f4f1;
  --surface-raised: #f5f4f1;
  --ink: #0a0a0a;
  --ink-muted: #5c574d;
  --gold-light: #b08c34;
  --gold: #a07c2a;
  --gold-dark: #6a4f12;
  --gold-deep: #7d5f1a;
  --gold-line: rgba(160, 124, 42, 0.6);
  --gold-wash: #f7f0de;
  --focus: var(--gold-deep);
  --glow-gold: 0 10px 30px rgba(10, 10, 10, 0.08);
  --glow-pearl: 0 4px 10px rgba(10, 10, 10, 0.15);
}