:root {
  color-scheme: light;

  /* ==========================================================================
     Creative Giants — DESIGN.md Specification Tokens
     Oversized editorial poster on cream paper
     ========================================================================== */

  /* Surface & Color Tokens */
  --color-bone-white: #fffef7;
  --color-ink-black: #000000;
  --color-graphite: #666666;
  --color-ash: #aaaaaa;
  --color-charcoal-scale: #4d4c4a;
  --color-magenta-bloom: #8a0467;
  --color-forest-teal: #03624c;
  --color-powder-blue: #a5c8eb;
  --color-candy-pink: #ffacea;
  --color-mint-wash: #a5ebd6;
  --color-navy-ink: #101731;
  --color-signal-yellow: #ffd001;

  /* Theme mappings */
  --paper: var(--color-bone-white);
  --card: var(--color-bone-white);
  --card-2: #fcfbf4;
  --ink: var(--color-ink-black);
  --muted: var(--color-graphite);
  --dim: var(--color-ash);
  --line: var(--color-ash);
  --line-strong: var(--color-charcoal-scale);
  --white: var(--color-bone-white);
  --black: var(--color-ink-black);

  /* Accents */
  --amber: var(--color-ink-black);
  --amber-soft: var(--color-magenta-bloom);
  --amber-pale: var(--color-signal-yellow);
  --teal: var(--color-forest-teal);
  --blue: var(--color-powder-blue);
  --mint: var(--color-mint-wash);
  --pink: var(--color-candy-pink);
  --navy: var(--color-navy-ink);

  /* Typography: Switzer / Inter weight 300 for display, 400 for UI/body */
  --font-switzer: 'Inter', 'Switzer', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-display: var(--font-switzer);
  --font-body: var(--font-switzer);
  --font-serif: var(--font-switzer);
  --font-mono: "IBM Plex Mono", "Cascadia Code", Consolas, monospace;

  /* Typography Scale from DESIGN.md */
  --text-caption: 12px;
  --leading-caption: 1.43;
  --tracking-caption: -0.018em;

  --text-body-sm: 14px;
  --leading-body-sm: 1.43;
  --tracking-body-sm: -0.018em;

  --text-body: 16px;
  --leading-body: 1.4;
  --tracking-body: -0.018em;

  --text-subheading: 20px;
  --leading-subheading: 1.4;
  --tracking-subheading: -0.018em;

  --text-heading-sm: 34px;
  --leading-heading-sm: 1.25;
  --tracking-heading-sm: -0.02em;

  --text-heading: 54px;
  --leading-heading: 1.05;
  --tracking-heading: -0.023em;

  --text-display: clamp(52px, 8vw, 84px);
  --leading-display: 1.0;
  --tracking-display: -0.04em;

  --font-weight-light: 300;
  --font-weight-regular: 400;

  /* Spacing Scale */
  --spacing-8: 8px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;
  --spacing-64: 64px;
  --spacing-80: 80px;
  --spacing-112: 112px;

  --section-gap: 64px;
  --card-padding: 24px;
  --element-gap: 8px;

  /* Border Radii: 1440px for pills/buttons/tags, 0px for cards and images */
  --radius: 0px;
  --radius-sm: 0px;
  --radius-pills: 1440px;
  --radius-buttons: 1440px;
  --radius-tags: 1440px;
  --radius-cards: 0px;
  --radius-images: 0px;

  /* Elevation: 0px shadows, clean flat elevation */
  --shadow-subtle: rgba(255, 255, 255, 0.2) 0px 0px 0px 1px;

  --container: min(1360px, calc(100vw - 64px));
  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-snap: cubic-bezier(0.16, 1, 0.3, 1);
}