:root {
  color-scheme: light;

  /* Brand palette */
  --orange: #FFAE00;
  --lime: #CAC307;
  --periwinkle: #99B2EA;
  --cream: #F9F3DB;
  --pink: #DE4B7B;
  /* Derived for legible text on these grounds */
  --ink: #2B2140;
  --pink-ink: #B8325F;
  --lime-ink: #666104;

  /* Roles (components use these) */
  --night: var(--ink);
  --night-2: #3A2E52;
  --mandarin: var(--orange);
  --mandarin-ink: var(--pink-ink);
  --mandarin-soft: #FFE6A8;
  --sand: var(--cream);
  --sand-2: #F1E7C2;
  --paper: #FDF9EA;
  --olive: var(--lime-ink);
  --olive-2: #B8B106;
  --lemon: var(--pink-ink);
  --chestnut: var(--ink);
  --muted: #5E5470;
  --line: rgba(43, 33, 64, 0.14);
  --line-strong: rgba(43, 33, 64, 0.28);
  --on-night: var(--cream);
  --on-night-muted: rgba(249, 243, 219, 0.74);

  /* Type */
  --font-display: "Instrument Serif", "Iowan Old Style", Georgia, serif;
  --font-body: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fs-display: clamp(3.5rem, 1.6rem + 8vw, 9rem);
  --fs-h1: clamp(2.75rem, 1.5rem + 5vw, 5.75rem);
  --fs-h2: clamp(2.25rem, 1.4rem + 3.2vw, 4.25rem);
  --fs-h3: clamp(1.45rem, 1.25rem + 0.7vw, 1.9rem);
  --fs-lead: clamp(1.0625rem, 0.98rem + 0.4vw, 1.3rem);
  --fs-body: 1rem;
  --fs-small: 0.875rem;
  --fs-label: 0.75rem;

  /* Space & shape */
  --gutter: clamp(16px, 4vw, 48px);
  --container: 1240px;
  --section: clamp(72px, 9vw, 128px);
  --radius-s: 4px;
  --radius-m: 10px;
  --radius-l: 20px;
  --header-h: 72px;

  --shadow-cool: 0 1px 2px rgba(43, 33, 64, 0.05), 0 10px 28px rgba(43, 33, 64, 0.06);
  --shadow-warm: 0 2px 4px rgba(184, 50, 95, 0.06), 0 22px 44px rgba(255, 174, 0, 0.22);

  /* Motion tokens */
  --ease-settle: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-ripe: cubic-bezier(0.65, 0, 0.35, 1);
  --ease-press: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --t-instant: 120ms;
  --t-quick: 220ms;
  --t-base: 500ms;
  --t-slow: 800ms;
  --t-cinematic: 1200ms;
  --stagger-word: 40ms;
  --stagger-item: 80ms;

  interpolate-size: allow-keywords;
}

@media (max-width: 767px) {
  :root { --header-h: 60px; }
}