/* =============================================================================
 * tokens.css — DESIGN TOKENS (single source of design truth)
 * -----------------------------------------------------------------------------
 * Every colour here was sampled directly from the uploaded book illustrations:
 * warm sandy creams, terracotta clay, deep wood browns, with sea-blue and
 * sage-green accents from the characters' clothes and the sea. Components never
 * hardcode colours — they only consume these variables (DRY + consistency).
 * ========================================================================== */

:root {
  /* — Sand / paper (backgrounds) — */
  --sand-50:  #FDF8EE;
  --sand-100: #FBF4E6;
  --sand-200: #F7EBD3;
  --sand-300: #F2DEB8;

  /* — Clay / terracotta (PRIMARY accent — sampled from pots & walls) — */
  --clay-300: #E0B07E;
  --clay-400: #D18E5D;
  --clay-500: #C2703F;
  --clay-600: #A85A30;

  /* — Wood / earth (depth, borders, footer) — */
  --wood-700: #814A34;
  --wood-800: #5E3622;

  /* — Ink (text — the charcoal-navy of the beanie) — */
  --ink-900: #2E2A2E;
  --ink-700: #574E4C;
  --ink-500: #8A7D74;

  /* — Sea blue (SECONDARY accent — striped shirt & the sea) — */
  --sea-300: #A7C6DC;
  --sea-400: #6FA0C4;
  --sea-500: #4F86AE;

  /* — Sage green & blush (tertiary playful accents) — */
  --sage-400: #8FB06A;
  --sage-500: #6E9450;
  --blush-300: #E6A6B4;

  /* — Amazon gold (the buy button — warm, harmonises with the palette) — */
  --gold-400: #F6C667;
  --gold-500: #F0AD3C;
  --gold-600: #D9912A;

  /* — Semantic roles — */
  --bg:         var(--sand-100);
  --bg-soft:    var(--sand-50);
  --surface:    #FFFFFF;
  --text:       var(--ink-900);
  --text-muted: var(--ink-700);
  --primary:    var(--clay-500);
  --primary-ink:#FFFFFF;
  --accent:     var(--sea-500);

  /* — Typography — */
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body:    "Quicksand", "Segoe UI", system-ui, sans-serif;

  /* — Radii (soft, storybook-rounded) — */
  --r-sm: 10px;
  --r-md: 18px;
  --r-lg: 28px;
  --r-xl: 42px;
  --r-pill: 999px;

  /* — Shadows (warm-tinted, never grey) — */
  --shadow-sm: 0 2px 8px rgba(94, 54, 34, 0.08);
  --shadow-md: 0 14px 30px -12px rgba(94, 54, 34, 0.28);
  --shadow-lg: 0 30px 60px -22px rgba(94, 54, 34, 0.40);

  /* — Layout — */
  --container: 1180px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --section-y: clamp(4rem, 9vw, 7.5rem);

  /* — Motion — */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --speed: 0.5s;
}