/* ETHEREAL — design tokens
   Colour comes from the official eye mark (cracked champagne metal on ink),
   sampled from public/brand/ethereal-eye-web.png: p10 #614b34 · p50 #ceb59a · p90 #eed9bf.
   Motion token names/values match ethereal-catalog (--motion-*, --ease-premium)
   so both sites share one motion vocabulary. */

:root {
  color-scheme: dark;

  /* colour */
  --ink: #0b0a09;
  --ink-raised: #151310;
  --paper: #e9e1d4;
  --paper-deep: #d5cab7;
  --bone: #ece4d8;
  --ash: #8f887c;            /* labels on ink  — 5.6:1 */
  --ash-on-paper: #5b554b;   /* labels on paper — 5.3:1 */
  --champagne: #ceb59a;
  --champagne-hi: #eed9bf;
  --champagne-lo: #614b34;
  --line: rgb(236 228 216 / 0.16);
  --line-paper: rgb(11 10 9 / 0.22);

  /* type families */
  --font-display: "Big Shoulders Display", Impact, "Arial Narrow", sans-serif;
  --font-text: "Hanken Grotesk", system-ui, -apple-system, "Segoe UI", Helvetica, Arial, sans-serif;

  /* type scale — six sizes, nothing else */
  --t-wordmark: clamp(5.2rem, 27vw, 34rem);
  --t-display: clamp(3.4rem, 12.5vw, 11rem);
  --t-statement: clamp(2.7rem, 9.4vw, 8.75rem);
  --t-title: clamp(1.75rem, 4.2vw, 3.25rem);
  --t-body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --t-label: 0.72rem;

  --track-label: 0.32em;
  --track-wide: 0.5em;

  /* spacing (4px base) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4.5rem;
  --section: clamp(5rem, 11vw, 9.5rem);

  /* grid */
  --gutter: clamp(1rem, 4.2vw, 3.5rem);
  --gap: clamp(0.75rem, 1.6vw, 1.5rem);
  --max: 120rem;

  /* motion — MICRO (immediate) / REVEAL (content enters) / EDITORIAL (narrative) */
  --motion-instant: 120ms;
  --motion-fast: 180ms;
  --motion-medium: 320ms;
  --motion-slow: 550ms;
  --motion-hero: 700ms;
  --motion-editorial: 1100ms;
  --ease-premium: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-editorial: cubic-bezier(0.65, 0, 0.35, 1);
  --reveal-y: 28px;
  --stagger: 70ms;
}