/* ==========================================================================
   ONCE CONTENT — DESIGN TOKENS
   Single source of truth for colour, type and spacing.
   Change a value here and it updates everywhere the token is used.
   ========================================================================== */

:root {
  /* ---- Colour: core brand ---- */
  --brown: #371906;          /* deep brown — primary text, primary buttons */
  --brown-ink: #371906;      /* true brand brown — headings and primary text on cream */
  --brown-soft: #6B4A30;     /* secondary text, muted body copy */
  --cream: #E3D8C5;          /* warm cream — primary background */
  --cream-light: #F4EEE3;    /* lighter cream — cards, alternating sections */
  --cream-deep: #D8C7A9;     /* deeper stone — borders, dividers, hover fills */
  --surface: #FBF9F4;        /* near-white warm surface — form fields, light cards */
  --taupe: #9C8163;          /* muted accent — eyebrows, numbering, small labels */
  --taupe-light: #C7B79C;    /* faint accent — hairlines on dark backgrounds */

  /* ---- Colour: on-dark (brown backgrounds) ---- */
  --on-brown: #F4EEE3;
  --on-brown-muted: #C9B8A2;

  /* ---- Colour: system ---- */
  --line: rgba(55, 25, 6, 0.14);
  --line-strong: rgba(55, 25, 6, 0.28);
  --shadow-soft: 0 1px 2px rgba(42, 19, 4, 0.04), 0 12px 28px -18px rgba(42, 19, 4, 0.22);
  --focus-ring: #6B4A30;

  /* ---- Type families ---- */
  --font-serif: 'Cormorant Garamond', 'Iowan Old Style', 'Times New Roman', Georgia, serif;
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

  /* ---- Type scale (fluid) ---- */
  --fs-display: clamp(2.9rem, 5.2vw + 1.2rem, 6.75rem);
  --fs-h1: clamp(2.35rem, 3.4vw + 1.1rem, 4.2rem);
  --fs-h2: clamp(1.85rem, 2vw + 1rem, 2.9rem);
  --fs-h3: clamp(1.4rem, 1vw + 1rem, 1.85rem);
  --fs-h4: clamp(1.15rem, 0.5vw + 1rem, 1.35rem);
  --fs-lead: clamp(1.1rem, 0.6vw + 0.95rem, 1.4rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9rem;
  --fs-label: 0.78rem;
  --fs-micro: 0.7rem;

  --lh-tight: 1.08;
  --lh-snug: 1.25;
  --lh-body: 1.65;

  --tracking-label: 0.16em;
  --tracking-wide: 0.06em;

  /* ---- Spacing ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1.25rem;
  --space-md: 2rem;
  --space-lg: 3rem;
  --space-xl: clamp(4rem, 6vw, 6.5rem);
  --space-2xl: clamp(5.5rem, 9vw, 9.5rem);

  /* ---- Layout ---- */
  --container-max: 78rem;
  --container-narrow: 46rem;
  --container-pad: clamp(1.25rem, 4vw, 3.25rem);
  --radius-sm: 2px;
  --radius-md: 4px;

  /* ---- Motion ---- */
  --ease-editorial: cubic-bezier(0.22, 0.61, 0.36, 1);
  --dur-fast: 220ms;
  --dur-med: 520ms;
  --dur-slow: 900ms;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 1ms;
    --dur-med: 1ms;
    --dur-slow: 1ms;
  }
}