:root {
  /* Warm, grounded palette (creative brief §7). Brand-guideline colours: Sunflower
     Ochre, Paper Cream, Clay Terracotta. Logo pink and slate stay as small accents
     only; the brief asks to avoid an "overly pink" look. */
  --color-paper: #F7F1E6;
  --color-cream: #EDE4D3;
  --color-surface: #FFFDF8;
  --color-espresso: #1F1612;
  --color-espresso-2: #2C211C;
  --color-ink-deep: #1F1612;
  --color-ink: #4A3A33;
  --color-ink-soft: #6B5A50; /* 5.9:1 on paper */
  --color-ochre: #FFDE59;
  --color-terracotta: #953E3E;
  --color-clay: #E36F3C;
  --color-sage: #8DC4BF;
  --color-lilac: #C9B4E6;
  --color-pink: #E15AB2;
  --color-slate: #486572;

  /* One colour per story world. All take espresso text at 5.5:1 or better. */
  --world-scared: var(--color-clay);
  --world-culture: var(--color-ochre);
  --world-plan: var(--color-sage);
  --world-made: var(--color-lilac);

  --color-line: rgba(31, 22, 18, 0.1);
  --color-line-strong: rgba(31, 22, 18, 0.2);
  --color-field-border: #8A786D; /* 3:1 boundary on paper and surface */
  --color-on-dark: #F7F1E6;
  --color-on-dark-muted: rgba(247, 241, 230, 0.7);
  --color-line-dark: rgba(247, 241, 230, 0.14);

  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;
  --space-10: 128px;
  --section-y: clamp(88px, 11vw, 152px);

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;
  --radius-xl: clamp(24px, 3vw, 40px);
  --radius-full: 999px;

  --shadow-soft: 0 24px 60px -24px rgba(31, 22, 18, 0.25), 0 2px 6px -2px rgba(31, 22, 18, 0.06);
  --shadow-float: 0 40px 80px -32px rgba(31, 22, 18, 0.38);
  --shadow-note: 0 14px 24px -12px rgba(31, 22, 18, 0.4), 0 2px 3px rgba(31, 22, 18, 0.08);

  --ease-out: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);

  --font-display: "Anton", "Impact", sans-serif;
  --font-body: "Hanken Grotesk", system-ui, sans-serif;
  --font-accent: "Caveat", "Segoe Print", cursive;

  --container-max: 1320px;
  --gutter: clamp(16px, 4vw, 48px);
  --header-h: 88px;
}