/* ==========================================================================
   Whitehead Wellness — Design Tokens (Brand v2.0)
   The single source of truth for foundation styling. CLAUDE.md §4.
   ==========================================================================

   CONTRAST — measured, not assumed (Launch Readiness gate, CLAUDE.md §9):

     Muted Navy   on Warm Parchment .... 9.8:1  PASSES AA and AAA
     Muted Navy   on Dragon Gold ....... 5.1:1  PASSES AA
     Dragon Gold  on Warm Parchment .... 1.9:1  FAILS — never use gold for text

   Gold is a BORDER, a GLOW, and a BUTTON FILL. It is never ink. A gold button
   takes navy text, which is the combination that passes.

   DRAGON COLOURS ARE NOT IN THIS FILE. They live on the Dragon model and arrive
   as an inline custom property, because no dragon data is ever hardcoded
   (CLAUDE.md §8):

       <article class="dragon-themed" style="--dragon-color: {{ dragon.color_hex }}">

   And they are never a text fill either — six of the seven fail AA as ink.

   TYPOGRAPHY. The body face is a clean geometric sans. The script face is for
   ACCENTS ONLY — a tagline, a vow, a dragon speaking. Never body copy, never a
   button, never a card description (CLAUDE.md §4). If a paragraph is in Caveat,
   that is a bug.

   Both faces are loaded in base.html. Without that link this file silently falls
   back to Segoe UI and *Segoe Script*, which is how the site once shipped its
   pricing table in handwriting.
   ========================================================================== */

:root {
  /* --- Foundation palette — fixed roles, platform-wide ------------------- */
  /* Kate's Brand Standards Guide v1.0 (adopted over the earlier v2.0 note; see
     CLAUDE.md §4). Every value re-checked against Warm Ivory: navy 11.7:1, charcoal
     9.4:1, text-soft 5.0:1 — all pass AA. Antique gold is 2.7:1 and so is STILL
     never a text colour, only borders/glow/fill — the rule the whole file exists to
     protect (below). */
  --color-text: #22324a; /* Midnight Navy — all body text and headlines, always */
  --color-bg: #f7f3ec; /* Warm Ivory — page background, everywhere */
  --color-gold: #b89045; /* Brushed Antique Gold — borders, CTAs, glow */

  --color-text-soft: #5c6a73; /* Secondary text. 5.0:1 on ivory — passes AA */
  --color-text-faint: #7d8992; /* Meta only. Never for anything load-bearing */
  --color-charcoal: #3c4045; /* Neutral ink, 9.4:1 — an alternative to navy */
  --color-silver: #c8cdd3; /* Platinum Silver — decorative accent, never text */
  --color-surface: #fffdf8; /* Cards, lifted off the ivory */
  --color-surface-sunk: #f2ede0; /* Wells, quoted blocks, inset panels */

  --color-line: rgba(34, 50, 74, 0.12); /* Hairlines that are not gold (navy tint) */
  --color-line-strong: rgba(34, 50, 74, 0.2);

  --color-gold-soft: rgba(184, 144, 69, 0.3);
  --color-gold-wash: rgba(184, 144, 69, 0.09);
  --color-gold-glow: rgba(184, 144, 69, 0.4);
  --color-gold-deep: #856a2b; /* Gold dark enough to be ink. 4.6:1 — use sparingly */

  /* Feedback. Muted to match the palette. The voice is encouraging, not
     alarming, and the colours should agree (CLAUDE.md §5). */
  --color-success: #4a7c59;
  --color-warning: #b5834a;
  --color-error: #a4544c;

  /* --- Typography -------------------------------------------------------- */
  --font-body: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --font-accent: "Caveat", cursive; /* ACCENTS ONLY. Never body copy. */

  /* Fluid, bounded, and in rem so it still honours the browser's font-size
     setting — scalable type is a Launch Readiness item (CLAUDE.md §9).

     The old scale went to 3rem at the top, which is why the homepage headline
     took four lines on a phone. This tops out lower and reads better. */
  --text-xs: 0.75rem; /* 12 */
  --text-sm: 0.8125rem; /* 13 */
  --text-base: 1rem; /* 16 */
  --text-md: 1.0625rem; /* 17 — body copy, a touch larger than the UI */
  --text-lg: clamp(1.125rem, 1.06rem + 0.3vw, 1.25rem);
  --text-xl: clamp(1.25rem, 1.15rem + 0.5vw, 1.5rem);
  --text-2xl: clamp(1.5rem, 1.3rem + 0.9vw, 1.875rem);
  --text-3xl: clamp(1.875rem, 1.55rem + 1.4vw, 2.5rem);

  --leading-tight: 1.18;
  --leading-snug: 1.35;
  --leading-body: 1.6; /* Generous. This is a lot of reading, often on a phone. */

  --tracking-wide: 0.08em;

  /* --- Spacing ----------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;

  /* The vertical rhythm between page sections. One variable so the whole site
     breathes together instead of each page inventing its own padding. */
  --section-gap: var(--space-10);
  --card-pad: var(--space-5);

  /* --- Shape ------------------------------------------------------------- */
  /* Soft and rounded. Never sharp (CLAUDE.md §4). */
  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --border-hairline: 1px solid var(--color-line);
  --border-gold: 1px solid var(--color-gold-soft);

  /* Soft, warm shadows. No metallic gradients, no gloss. */
  --shadow-sm: 0 1px 2px rgba(46, 63, 74, 0.04);
  --shadow-md: 0 2px 12px rgba(46, 63, 74, 0.07);
  --shadow-lg: 0 8px 30px rgba(46, 63, 74, 0.1);
  --shadow-glow: 0 0 0 3px var(--color-gold-glow);

  /* --- Layout ------------------------------------------------------------ */
  --width-prose: 62ch;
  --width-container: 1120px;
  --width-narrow: 720px;
  --gutter: var(--space-5); /* Mobile first. Widens below. */

  /* 44px is the accessible floor for a touch target. Do not shrink it to fit a
     layout — fix the layout. */
  --tap-target: 44px;

  /* --- Motion ------------------------------------------------------------ */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
  --duration-slow: 600ms;
}

/* --- Breakpoints ----------------------------------------------------------
   Mobile first, always. Build and verify at 375–428px BEFORE writing a single
   line inside these queries. Desktop is an expansion of mobile, not the reverse
   (CLAUDE.md §3).
   -------------------------------------------------------------------------- */

@media (min-width: 640px) {
  :root {
    --gutter: var(--space-6);
    --card-pad: var(--space-6);
  }
}

@media (min-width: 768px) {
  :root {
    --gutter: var(--space-8);
    --section-gap: var(--space-16);
  }
}

@media (min-width: 1024px) {
  :root {
    --gutter: var(--space-10);
    --section-gap: var(--space-20);
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --duration-fast: 0ms;
    --duration-base: 0ms;
    --duration-slow: 0ms;
  }
}