/* ═══════════════════════════════════════════════════════════════════
   Heavenly Body Massage — design tokens
   The single source of truth for colour, type, spacing, radius, shadow.
   Every stylesheet and page builds on these; never hard-code a hex value
   or a pixel gap in a component when a token exists for it.
   ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ── Colour ──────────────────────────────────────────────────────
     Warm ivory ground, deep charcoal ink, muted sage and warm gold as
     the two accents. Body text on the ivory ground runs at 12.1:1 and
     --ink-soft at 5.9:1, both clearing WCAG AA. Gold is a DECORATIVE
     accent only — it fails AA on ivory, so never use it for body text
     or for a control's only label. */
  --ivory:       #FBF8F3;
  --cream:       #F5EFE6;
  --sand:        #EDE4D6;
  --beige:       #E0D3C0;
  --border:      #E4DACB;

  --ink:         #2A2724;   /* headings, body */
  --ink-soft:    #5F584F;   /* secondary copy */
  --ink-faint:   #8A8177;   /* meta, captions */

  --sage:        #7C8C74;   /* primary action */
  --sage-dark:   #616F5A;   /* hover / active */
  --sage-tint:   #EDF0EA;

  --gold:        #B08D4F;   /* decorative accent only */
  --gold-deep:   #8A6D3B;   /* gold that DOES pass AA on ivory (5.1:1) */

  --white:       #FFFFFF;
  --focus:       #2F6FEB;   /* focus ring — deliberately outside the palette
                               so it never blends into a warm background */

  /* ── Type ────────────────────────────────────────────────────────
     Display face for headings, a readable sans for everything else.
     Both fall back to system faces so the page is legible before (and
     if) the webfont ever lands. */
  --font-display: "Cormorant Garamond", Georgia, "Times New Roman", serif;
  --font-body:    "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Fluid scale — clamp() so headings shrink on phones without a
     media query. Minimums are chosen to stay readable at 320px. */
  --t-hero:  clamp(2.5rem, 7vw, 4.5rem);
  --t-h1:    clamp(2rem, 5vw, 3.25rem);
  --t-h2:    clamp(1.6rem, 3.5vw, 2.5rem);
  --t-h3:    clamp(1.25rem, 2.2vw, 1.6rem);
  --t-lead:  clamp(1.05rem, 1.6vw, 1.25rem);
  --t-body:  1rem;
  --t-small: 0.875rem;
  --t-micro: 0.75rem;

  --lh-tight: 1.15;
  --lh-snug:  1.35;
  --lh-body:  1.65;

  --track-wide: 0.14em;   /* eyebrows / small caps */

  /* ── Spacing — 8px scale ─────────────────────────────────────── */
  --s-1: 0.25rem;  /*  4 */
  --s-2: 0.5rem;   /*  8 */
  --s-3: 0.75rem;  /* 12 */
  --s-4: 1rem;     /* 16 */
  --s-5: 1.5rem;   /* 24 */
  --s-6: 2rem;     /* 32 */
  --s-7: 3rem;     /* 48 */
  --s-8: 4rem;     /* 64 */
  --s-9: 6rem;     /* 96 */
  --s-10: 8rem;    /* 128 */

  /* Section rhythm — one knob for vertical page cadence */
  --section-y: clamp(3.5rem, 9vw, 7rem);
  --gutter:    clamp(1.25rem, 5vw, 2.5rem);
  --measure:   68ch;        /* max line length for readable prose */
  --wrap:      1180px;      /* page container */
  --wrap-narrow: 760px;

  /* ── Radius ──────────────────────────────────────────────────── */
  --r-sm:   6px;
  --r-md:   12px;
  --r-lg:   20px;
  --r-xl:   28px;
  --r-pill: 999px;

  /* ── Shadow — warm-tinted, never neutral grey ────────────────── */
  --sh-sm: 0 1px 2px rgba(42, 39, 36, 0.05);
  --sh-md: 0 4px 16px rgba(42, 39, 36, 0.07);
  --sh-lg: 0 12px 32px rgba(42, 39, 36, 0.10);
  --sh-xl: 0 24px 56px rgba(42, 39, 36, 0.13);

  /* ── Motion ──────────────────────────────────────────────────── */
  --ease:      cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --dur-fast:  140ms;
  --dur:       240ms;
  --dur-slow:  420ms;

  /* Height of the mobile sticky Book/Call bar. Pages add this to their
     bottom padding so the bar never covers the last line of content. */
  --sticky-h: 64px;

  --z-header: 100;
  --z-sticky: 90;
  --z-modal:  200;
}

/* Honour the OS "reduce motion" setting globally. Any component-level
   animation must still look correct when these are collapsed to ~0. */
@media (prefers-reduced-motion: reduce) {
  :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}