/* ============================================================
   TOKENS — shared design variables
   The single source of truth for color, type, spacing, motion.
   Every page loads this before anything else.
   ============================================================ */

:root {
  /* ---- palette ---- */
  --ink: #3a2e2a;             /* primary text, warm near-black */
  --ink-soft: #6b5a52;        /* secondary text */
  --parchment: #f6efe3;       /* base background */
  --parchment-deep: #ede1cd;  /* recessed panels */
  --rose: #b5626a;            /* primary accent — dried rose */
  --rose-deep: #8f4650;
  --gold: #ad8a4e;            /* metallic accent — antique gold */
  --gold-soft: #d9c191;
  --night: #1c2036;           /* castle-night background, used sparingly */
  --night-deep: #11142455;
  --glass-fill: rgba(255, 251, 244, 0.55);
  --glass-border: rgba(173, 138, 78, 0.35);
  --line: rgba(58, 46, 42, 0.14);

  /* ---- type ---- */
  --font-display: 'Beau Rivage', cursive;      /* hero moments only */
  --font-serif: 'Fraunces', serif;             /* editorial copy, italic */
  --font-sans: 'Work Sans', sans-serif;        /* functional text */

  /* ---- scale ---- */
  --step-hero: clamp(3.2rem, 7vw, 6rem);
  --step-h1: clamp(2rem, 4vw, 3rem);
  --step-h2: clamp(1.5rem, 2.6vw, 2.1rem);
  --step-h3: clamp(1.15rem, 1.8vw, 1.4rem);
  --step-body: 1.05rem;
  --step-small: 0.85rem;

  /* ---- spacing ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 2rem;
  --space-lg: 4rem;
  --space-xl: 7rem;

  /* ---- motion ---- */
  --ease-soft: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-quick: 0.25s;
  --dur-med: 0.6s;
  --dur-slow: 1.1s;

  /* ---- radius ---- */
  --radius-card: 4px 18px 4px 18px; /* mirrors a book-page corner, not a generic rounded box */
  --radius-soft: 6px;
}

@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--parchment);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: var(--step-body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--rose-deep);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  color: var(--ink);
}

p { margin: 0; }

button {
  font-family: inherit;
  cursor: pointer;
}