/* ============================================================
   Whole Wild World — design tokens
   The single source of truth. Everything derives from here.
   Palette: "Strait & Candytuft" — the Strait of Gibraltar,
   the limestone of the Rock, and Iberis gibraltarica.
   ============================================================ */

:root {
  /* ---- colour ---- */
  --ink-deep:  #06181C;
  --strait:    #0F3239;
  --myrtle:    #2C5F52;
  --lichen:    #A8B5A2;
  --limestone: #DEDDD6;
  --chalk:     #EDEEEA;
  --candytuft: #C4739B;
  --gorse:     #E0A83C;

  /* semantic */
  --surface-dark:       var(--strait);
  --surface-deepest:    var(--ink-deep);
  --surface-light:      var(--limestone);
  --surface-raised:     var(--chalk);
  --text-on-dark:       var(--chalk);
  --text-on-dark-mute:  var(--lichen);
  --text-on-light:      var(--ink-deep);
  --text-on-light-mute: #4A5852;
  --accent:             var(--candytuft);
  --planted:            var(--myrtle);
  --data:               var(--gorse);
  --rule-dark:          rgba(168, 181, 162, .22);
  --rule-light:         rgba(6, 24, 28, .14);

  /* ---- type ---- */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body:    'Schibsted Grotesk', system-ui, -apple-system, sans-serif;
  --font-mono:    'IBM Plex Mono', ui-monospace, monospace;

  --display-xl: clamp(3rem, 1.5rem + 7.5vw, 8.25rem);
  --display-l:  clamp(2.25rem, 1.5rem + 3.75vw, 4.5rem);
  --h2:         clamp(1.75rem, 1.2rem + 2.75vw, 3rem);
  --h3:         clamp(1.25rem, 1.1rem + .75vw, 1.625rem);
  --lede:       clamp(1.25rem, 1.1rem + .6vw, 1.625rem);
  --body:       clamp(1rem, .96rem + .2vw, 1.125rem);
  --small:      .875rem;
  --label:      .75rem;

  /* ---- space ---- */
  --tile: clamp(14px, 2.2vw, 26px);          /* = 1 square metre */
  --gap:  24px;
  --pad-x: clamp(20px, 5vw, 96px);
  --space-section: clamp(80px, 10vw, 180px);
  --maxw: 1440px;
  --measure: 68ch;

  /* ---- motion ---- */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --dur-fast: 180ms;
  --dur-med:  420ms;
  --dur-slow: 900ms;

  --radius-tile: 2px;   /* tesserae are almost square. Almost. */
  --radius-card: 4px;
  --radius-pill: 999px;
}

@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 0ms; --dur-med: 0ms; --dur-slow: 0ms; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}