/* ==========================================================================
   Design tokens — the single source of truth for colour, type, space and
   layout. Nothing below this file should hard-code a hex value or a pixel
   font size; change the brand here and the whole site follows.
   ========================================================================== */

:root {
  /* --- Brand --------------------------------------------------------- */
  --color-ink: #2a1734;
  --color-accent: #7b4b8c;
  --color-accent-deep: #5d3369;
  --color-accent-soft: #b58cc4;
  --color-accent-pale: #d5b4de;
  --color-accent-wash: #f7edf7;
  --color-accent-ink: #421f4c;

  /* --- Surfaces ------------------------------------------------------- */
  --color-bg: #faf4f5;
  --color-surface: #f2e8ee;
  --color-cream: #fdfaf6;
  --color-frame: #f7f0f3;
  --gradient-page: linear-gradient(160deg, #fdfaf6 0%, #faf4f5 38%, #f6edf2 100%);
  --gradient-band: linear-gradient(120deg, #f4e9f0, #fbf5f1);

  /* --- Text ----------------------------------------------------------- */
  --text-primary: var(--color-ink);
  --text-secondary: color-mix(in srgb, var(--color-ink) 74%, transparent);
  --text-muted: color-mix(in srgb, var(--color-ink) 52%, transparent);
  --text-on-dark: var(--color-cream);
  --text-on-dark-secondary: color-mix(in srgb, var(--color-frame) 78%, transparent);
  --text-on-dark-muted: color-mix(in srgb, var(--color-frame) 55%, transparent);

  --color-divider: color-mix(in srgb, var(--color-ink) 14%, transparent);
  --color-divider-on-dark: color-mix(in srgb, var(--color-frame) 20%, transparent);

  /* --- Typography ------------------------------------------------------
     Two families only. Sizes are a fixed scale: fluid where the jump
     between phone and desktop is large, static where it is not. */
  --font-heading: "Fraunces", Georgia, "Times New Roman", serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;

  --size-display: clamp(2.75rem, 1.35rem + 5.4vw, 4.75rem); /* 44 → 76 */
  --size-h2: clamp(2rem, 1.5rem + 1.9vw, 2.875rem);         /* 32 → 46 */
  --size-h3: clamp(1.5rem, 1.35rem + 0.6vw, 1.875rem);      /* 24 → 30 */
  --size-h4: 1.125rem;                                      /* 18 */
  --size-stat: clamp(1.75rem, 1.5rem + 0.9vw, 2.125rem);    /* 28 → 34 */
  --size-lead: 1.0625rem;                                   /* 17 */
  --size-body: 0.9375rem;                                   /* 15 */
  --size-sm: 0.875rem;                                      /* 14 */
  --size-meta: 0.8125rem;                                   /* 13 */
  --size-micro: 0.6875rem;                                  /* 11 */

  --tracking-brand: 0.42em;
  --tracking-eyebrow: 0.22em;
  --tracking-label: 0.14em;
  --tracking-wide: 0.06em;

  --leading-tight: 1.06;
  --leading-snug: 1.4;
  --leading-normal: 1.62;

  /* --- Space (4px base) ------------------------------------------------ */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;

  /* --- Layout ---------------------------------------------------------- */
  --container-max: 1180px;
  --gutter: clamp(20px, 4vw, 32px);
  --section-space: clamp(56px, 8vw, 88px);
  --header-height: 76px;

  --radius-img: 6px;
  --radius-pill: 999px;

  --plate-frame: 6px;

  /* --- Motion ---------------------------------------------------------- */
  --transition-fast: 140ms ease;
}