/* =====================================================================
   tokens.css — The Breast Well design tokens
   ---------------------------------------------------------------------
   Source of truth: .docs/DESIGN-DIRECTIVES.md §2.1 (colour), §3.1
   (breakpoints/container), §3.2 (fluid type ramp) — which amends
   .docs/DESIGN-SPEC-PENPOT.md §2/§3. Every value below is measured, not
   chosen. Do not add or "improve" a colour that is not in §2.1.

   THE TWO-TIER ROSE RULE (§2.1) — the one thing to internalise:
     --rose       #D97A8C  the brand rose EXACTLY as designed. Only on
                           surfaces/marks that carry NO text.
     --rose-deep  #B85269  anything that must clear a contrast floor:
                           rose surfaces that carry text, and rose
                           text/strokes/marks on light backgrounds.
   Never put text on --rose. Never use --rose-deep where --rose will do.
   ===================================================================== */

:root {
  /* ── tier 1: the brand rose, exactly as designed ───────────────────── */
  --rose: #D97A8C;        /* Rose Blush 05 — text-free surfaces only:
                             Meet Yolande portrait card, footer nav dots, hover tints */

  /* ── tier 2: deepened, for anything that must clear a contrast floor ─ */
  --rose-deep: #B85269;   /* rose surfaces that CARRY text (qualifications band, contact
                             panel, primary buttons) AND rose text/stroke/marks on light
                             backgrounds (secondary button, dots, carets, focus, borders).
                             4.72:1 with white. */
  --rose-deep-hover: #9A5763;  /* primary button hover (Rose Blush 03) */
  --rose-deep-active: #7C4650; /* primary button active (Rose Blush 02) */
  --rose-card: #A8455A;   /* inner card/row fill inside a --rose-deep surface: qualification
                             cards, contact panel rows. Replaces the design's unusable
                             off-ramp #D16F81. ⚠ DO NOT ALTER — see the pair note below. */

  --gold-deep: #8C6B34;   /* trust bar band. 4.92:1 with white. */

  /* ── unchanged from the design ─────────────────────────────────────── */
  --rose-pill: #EFC6CE;   /* testimonial pills */
  --rose-100: #F6DFE3;    /* workshop-CTA band · decorative card strokes · light text
                             on --rose-card. ⚠ DO NOT ALTER — see the pair note below. */
  --tint: #FBF2F4;        /* tint bands, form-field fill */
  --ink: #4A3940;         /* headings, nav, footer, testimonial quote */
  --body: #6B6366;        /* body copy */
  --white: #FFFFFF;

  /* ⚠ --rose-card and --rose-100 are a matched pair: #F6DFE3 on #A8455A is
     4.53:1, a 0.7% margin over AA. Nudging either value breaks AA and must be
     re-measured (DESIGN-DIRECTIVES §2.1). */

  /* ── watermarks (decorative, aria-hidden, contrast-exempt) ─────────── */
  --wm-light: #FBF2F4;    /* ghost word on white */
  --wm-rose: #B86877;     /* ghost word on the rose band. Rose Blush ramp 04, set by
                             design-QA ruling R4 (was #E092A1). The ghost must track its
                             band: #E092A1 reads 1.24:1 on the DESIGN's #D97A8C but 1.98:1
                             on the ratified #B85269 — 60% more contrast, i.e. the ghost
                             starts to shout. #B86877 on #B85269 restores 1.19:1.
                             Decorative + aria-hidden, so no contrast floor applies and
                             lowering it is the correct direction. */
  --wm-white: #FFFFFF;    /* ghost word on --tint */

  /* ── focus ─────────────────────────────────────────────────────────── */
  --focus: #B85269;       /* 4.72:1 on white, 4.30:1 on --tint */

  /* ── system ───────────────────────────────────────────────────────── */
  --error: #B00020;       /* form errors — 6.6:1 on white */

  /* ── layout (§3.1) ────────────────────────────────────────────────── */
  --gutter: clamp(20px, 4vw, 40px);
  --container: 1140px;

  /* ── type families (§3 of the spec; see base.css for the @font-face
        chain that makes --font-display resolve to real Bodoni 72 Oldstyle
        where it is installed) ──────────────────────────────────────── */
  --font-display: "TBW Display", "TBW Display Fallback", Georgia, "Times New Roman", serif;
  --font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-button: "Inter", var(--font-body);

  /* ── fluid type ramp (§3.2) — use these clamp() values verbatim.
        Interpolated linearly between 390px and 1440px; 1rem = 16px. ── */
  --fs-h1: clamp(2.125rem, 1.7071rem + 1.7143vw, 3.25rem);   /* 34 → 52 */
  --fs-h2: clamp(1.75rem, 1.4714rem + 1.1429vw, 2.5rem);     /* 28 → 40 */
  --fs-card: clamp(1.25rem, 1.1571rem + 0.3810vw, 1.5rem);   /* 20 → 24 */
  --fs-wm: clamp(2.25rem, 1.6929rem + 2.2857vw, 3.75rem);    /* 36 → 60 (watermark) */
  --fs-body: 1rem;  /* 16 — never scales: body, nav, trust items, panel rows, buttons */

  /* line-heights — identical at every width (spec §3) */
  --lh-display: 1.2;
  --lh-intro: 1.75;   /* section intro paragraphs */
  --lh-card: 1.5;     /* qualification card copy, testimonial quote */
  --lh-tight: 1.2;    /* mission + workshop card copy, nav, UI */

  /* ── radii (measured, per element) ────────────────────────────────── */
  --r-button: 6px;    /* every button */
  --r-row: 8px;       /* workshop rows, contact panel rows, FAQ rows, form fields */
  --r-qual: 20px;     /* qualification cards */
  --r-mask-50: 50px;  /* portrait card + consultation photo (correction C2) */
  --r-mask-70: 70px;  /* hero photo */
  --r-pill: 40px;     /* testimonial pills */
  --r-round: 50%;

  /* ── spacing (only the values the design actually uses) ───────────── */
  --sp-4: 4px;
  --sp-8: 8px;
  --sp-12: 12px;
  --sp-16: 16px;
  --sp-20: 20px;
  --sp-24: 24px;
  --sp-32: 32px;
  --sp-40: 40px;
  --sp-47: 47px;
  --sp-57: 57px;

  /* ── breakpoints (documented; @media uses the px literals) ────────── */
  --bp-sm: 600px;   /* trust bar 2×2 · mission 2-col · watermarks appear */
  --bp-md: 900px;   /* two-column sections engage · qualifications 2-col */
  --bp-lg: 1200px;  /* full desktop composition · all decorations */
  --bp-xl: 1440px;  /* design-exact; container caps at 1140 */
}