/* ==========================================================================
   Design tokens - the single source of the visual system.
   Palette + type per PRODUCTPLAN §6 / TDD (hexes provisional, confirm vs brand).
   ========================================================================== */

:root {
  /* ---- Color: raw palette ---- */
  --ivory: #f3e4d8; /* warm cream base (PRODUCTPLAN §6) */
  --cream: #fbf7f2; /* lighter tint for large surfaces */
  --stone: #9a8f84; /* warm muted grey */
  --charcoal: #2b2724;
  --ink: #1a1613; /* body text */
  --gold: #c9a24b; /* single accent - CTAs, rules, hovers */
  --gold-deep: #a9863a; /* accent hover / active */
  --oxblood: #4a1420; /* deep tone - footer, DolaDiamonds link */
  --white: #ffffff;

  /* ---- Color: semantic (reference these, not the raw palette) ---- */
  --color-bg: var(--cream);
  --color-surface: var(--white);
  --color-text: var(--ink);
  --color-text-muted: #6b6156; /* darker than raw --stone for AA text on cream */
  --color-heading: var(--charcoal);
  --color-accent: var(--gold);
  --color-accent-hover: var(--gold-deep);
  --gold-text: #8a6d22; /* gold dark enough for AA text/icons on cream (4.5:1) */
  --color-on-accent: var(--ink); /* text on a gold surface */
  --color-border: rgba(26, 22, 19, 0.12);
  --color-footer-bg: var(--oxblood);
  --color-footer-text: var(--ivory);

  /* ---- Typography: families ---- */
  --font-serif: "Fraunces Variable", Georgia, "Times New Roman", serif;
  --font-sans:
    "Inter Variable", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica,
    Arial, sans-serif;

  /* ---- Typography: weights ---- */
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-semibold: 600;
  --weight-bold: 700;

  /* ---- Typography: line-height & tracking ---- */
  --leading-tight: 1.1;
  --leading-snug: 1.25;
  --leading-normal: 1.6;
  --tracking-tight: -0.02em;
  --tracking-normal: 0;
  --tracking-wide: 0.14em; /* small-caps eyebrow labels */

  /* ---- Typography: fluid scale (clamp min .. max, ~1.25 ratio, mobile-first) ---- */
  --step--1: clamp(0.83rem, 0.8rem + 0.15vw, 0.9rem);
  --step-0: clamp(1rem, 0.96rem + 0.2vw, 1.1rem); /* body */
  --step-1: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem);
  --step-2: clamp(1.45rem, 1.25rem + 1vw, 2rem);
  --step-3: clamp(1.8rem, 1.45rem + 1.7vw, 2.85rem);
  --step-4: clamp(2.2rem, 1.65rem + 2.75vw, 3.9rem);
  --step-5: clamp(2.65rem, 1.8rem + 4.25vw, 5.4rem); /* hero display */

  /* ---- Spacing scale (rem) ---- */
  --space-3xs: 0.25rem;
  --space-2xs: 0.5rem;
  --space-xs: 0.75rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;
  --space-3xl: 9rem;

  /* ---- Layout ---- */
  --content-max: 72rem; /* ~1152px main column */
  --measure: 38rem; /* readable prose width */
  --gutter: clamp(1.25rem, 4vw, 3rem);

  /* ---- Radius & elevation ---- */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(26, 22, 19, 0.06);
  --shadow-md: 0 8px 30px rgba(26, 22, 19, 0.1);

  /* ---- Motion ---- */
  --ease: cubic-bezier(0.2, 0, 0, 1);
  --dur: 200ms;

  /* ---- Breakpoints (reference only; CSS vars can't be used inside @media) ----
     sm 40rem (640px) · md 48rem (768px) · lg 64rem (1024px) · xl 80rem (1280px)
     ------------------------------------------------------------------------- */
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur: 0ms;
  }
}