/* =====================================================================
   ONLINE THERAPIST IN LONDON — DESIGN TOKENS
   ---------------------------------------------------------------------
   The ONE place brand values live. Every other stylesheet uses the
   SEMANTIC tokens (--color-*, --font-*, --step-*, --space-*) — never a
   raw hex or px value. Change the brand here and the whole site follows.
   Documented in docs/TOKENS.md (what each token is for + contrast notes).

   Sources: the approved HTML design pack (reference/mockup/Main.dc.html,
   "Homepage — desktop", Mike 28 Sep 2026) is the BRAND SOURCE OF TRUTH —
   #1001659 put the build back on its values after a drift: Newsreader
   headings, Figtree body, uppercase tracked buttons, eyebrows with a rule,
   ivory / sand / sage / deep-green bands, 10px radii, 96px desktop gutter.
   Plus kickoff answers 1.5/1.7 (Warm Ivory, Greens, Terracotta).

   Breakpoints (media queries can't read custom properties — use these
   literal values, mobile-first, min-width only):
     --bp-sm 600px · --bp-md 900px · --bp-lg 1200px
   ===================================================================== */

:root {
  /* ---- 1. Raw palette (reference only — components use section 2) ---- */

  /* Warm neutrals */
  --ivory:        #f4f1ea;  /* page background — "warm ivory" */
  --paper:        #fffdf8;  /* raised surfaces: cards, form fields */
  --sand:         #e9e4d9;  /* alternate section band (mockup) */
  --sand-deep:    #e3dccf;  /* pressed / hover on sand */
  --line:         #d6cec0;  /* hairlines, card borders */
  --line-strong:  #c9c0b1;  /* input borders, dividers that must show */
  --stone:        #877e70;  /* icons + decorative strokes ONLY (3.55:1 — fails for text) */

  /* Greens — primary */
  --green-950:    #182a26;  /* deepest — footer bottom bar */
  --green-900:    #1f3530;  /* deep band, footer */
  --green-800:    #253f39;  /* primary hover (darker) */
  --green-700:    #2e4b44;  /* PRIMARY brand green */
  --green-600:    #3a5650;  /* secondary green text on light */
  --green-400:    #8fa493;  /* muted sage — decorative */
  --green-300:    #b9c8ba;  /* sage — text on dark green, soft fills */
  --green-100:    #dfe6dc;  /* sage wash — chips, highlights */
  --green-50:     #edf0ea;  /* faintest wash */

  /* Footer / night palette (mockup footer) */
  --night-900:    #0f1413;  /* footer bottom bar */
  --night-800:    #141a19;  /* footer */
  --night-700:    #1b2322;  /* crisis bar on the footer */
  --night-600:    #1f2b29;  /* giant wordmark + arcs (decor only) */
  --night-line:   #2c3836;  /* hairlines on the footer */
  --night-text:   #ece6db;  /* text on the footer */
  --night-muted:  #a5aea8;  /* secondary text on the footer (8:1) */
  --night-sage:   #8db5a8;  /* eyebrows, accent + button on the footer */
  --night-stroke: #6e7b77;  /* outline buttons on the footer */

  /* Terracotta — accent */
  --terra-700:    #7a4226;  /* accent hover / pressed */
  --terra-600:    #94512f;  /* ACCENT — eyebrows, links-on-hover, focus ring */
  --terra-400:    #de9a72;  /* accent on dark green ONLY */
  --terra-100:    #f1e3d8;  /* terracotta wash — callouts */

  /* Ink */
  --ink:          #1c2624;  /* body text + headings */
  --ink-muted:    #56615d;  /* secondary text (5.7:1 on ivory) — FAILS on sage (3.7:1); base.css swaps it to ink there */

  /* Status */
  --red-700:      #a3302a;  /* errors + crisis emphasis only */

  /* ---- 2. Semantic colour tokens — USE THESE ---- */
  --color-bg:              var(--ivory);
  --color-surface:         var(--paper);
  --color-surface-alt:     var(--sand);
  --color-surface-quiet:   var(--green-300);               /* SAGE band — text on it must be ink (see base.css) */
  --color-text:            var(--ink);
  --color-text-muted:      var(--ink-muted);
  --color-heading:         var(--ink);
  --color-primary:         var(--green-700);
  --color-primary-hover:   var(--green-800);
  --color-on-primary:      var(--ivory);
  --color-accent:          var(--terra-600);
  --color-accent-hover:    var(--terra-700);
  --color-accent-wash:     var(--terra-100);
  --color-primary-wash:    var(--green-100);               /* sage block behind the hero photo, soft fills */
  --color-link:            var(--green-700);
  --color-link-hover:      var(--green-900);
  --color-border:          var(--line);
  --color-border-strong:   var(--line-strong);
  --color-decor:           var(--stone);
  --color-focus:           var(--green-700);               /* mockup: 2px green outline */
  --color-error:           var(--red-700);

  /* Dark (green) band — text colours that pass AA on --green-700/900 */
  --color-dark-bg:         var(--green-900);
  --color-dark-text:       var(--ivory);
  --color-dark-muted:      var(--green-300);
  --color-dark-accent:     var(--terra-400);
  --color-dark-raised:     var(--green-800);               /* panels on the dark band (crisis box) */
  --color-dark-border:     rgba(244, 241, 234, 0.16);      /* hairlines on the dark band */
  --color-dark-deep:       var(--green-950);               /* footer bottom bar */

  /* Footer (night) */
  --color-night-bg:        var(--night-800);
  --color-night-deep:      var(--night-900);
  --color-night-raised:    var(--night-700);
  --color-night-decor:     var(--night-600);
  --color-night-border:    var(--night-line);
  --color-night-text:      var(--night-text);
  --color-night-muted:     var(--night-muted);
  --color-night-accent:    var(--night-sage);
  --color-night-stroke:    var(--night-stroke);

  --color-on-light-btn:    #10201c;                        /* text on the pale sage footer/CTA button (pack) */

  /* Online booking modal (#1002569) */
  --color-modal-backdrop:  rgba(16, 32, 28, 0.6);
  --color-logo-plate:      #ffffff;                        /* behind third-party logos supplied as white JPGs (BAATN badge) */
  --color-modal-frame:     #ffffff;                        /* behind Google's white booking page, so no ivory seam */
  --shadow-modal:          0 24px 64px rgba(16, 32, 28, 0.35);

  /* Header */
  --color-header-bg:       var(--ivory);

  /* ---- 3. Typography ---- */
  /* #1001713: Mike picked pair 7 on /utilities/fonts/ — EB Garamond + Work Sans
     (was the pack's Newsreader + Figtree). */
  --font-heading: "EB Garamond", Garamond, Georgia, "Times New Roman", serif;
  --font-body:    "Work Sans", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-serif:   "EB Garamond", Garamond, Georgia, "Times New Roman", serif;  /* numerals, prices, quotes, pull-lines */

  --weight-regular: 400;
  --weight-medium:  500;
  --weight-semi:    600;
  --weight-heading: 500;  /* EB Garamond is thin at 400 — the approved preview set headings at 500 */

  /* Fluid type scale — 360px → 1440px. Desktop ends match the mockup
     (13 / 17 / 19 / 26 / 36 / 48 / 76px). */
  --step--1: 0.8125rem;                                   /* 13px  eyebrow, small print (14 on phones) */
  --step-0:  1.0625rem;                                   /* 17px  body — phones too (#1001707) */
  --step-1:  1.1875rem;                                   /* 19px  lede — phones too (#1001707) */
  --step-2:  clamp(1.3rem, 1.17rem + 0.56vw, 1.625rem);   /* 21→26 h3 */
  --step-3:  clamp(1.6rem, 1.39rem + 0.93vw, 2.25rem);    /* 26→36 h2 (small) */
  --step-4:  clamp(2.125rem, 1.83rem + 1.3vw, 3rem);      /* 34→48 h2 */
  --step-5:  clamp(2.625rem, 1.9rem + 3.2vw, 4.75rem);    /* 42→76 h1 */

  /* Small print that sits between --step--1 and body (#1001707).
     Desktop values match the mockup; phones get +1px (see below). */
  --text-note: 0.9375rem;  /* 15px  footer, card notes, form labels */
  --text-fine: 0.875rem;   /* 14px  hints, legal bar, form small print */

  --leading-tight: 1.1;
  --leading-snug:  1.25;
  --leading-body:  1.65;

  --tracking-tight:   -0.02em;
  --tracking-heading: -0.015em;
  --tracking-eyebrow: 0.08em;

  --measure: 65ch;   /* comfortable reading line length */

  /* ---- 4. Spacing (4px base) ---- */
  --space-3xs: 0.25rem;  /*  4 */
  --space-2xs: 0.5rem;   /*  8 */
  --space-xs:  0.75rem;  /* 12 */
  --space-s:   1rem;     /* 16 */
  --space-m:   1.5rem;   /* 24 */
  --space-l:   2rem;     /* 32 */
  --space-xl:  3rem;     /* 48 */
  --space-2xl: 4rem;     /* 64 */
  --space-3xl: 6rem;     /* 96 */

  /* Rhythm — generous on purpose ("light and airy") */
  --section-y: clamp(4rem, 2.93rem + 4.74vw, 7rem);  /* 64 → 112 (mockup) */
  --gutter:    clamp(1.25rem, -0.21rem + 6.48vw, 6rem); /* page side padding 20 → 96 (mockup) */
  --grid-gap:  clamp(1rem, 0.78rem + 0.93vw, 1.5rem);  /* 16 → 24 (mockup card gap) */
  --flow:      1em;                                  /* default gap between stacked text blocks */

  /* ---- 5. Layout ---- */
  --container:        1248px;   /* 1440 artboard − 2 × 96 */
  --container-narrow: 760px;
  --container-wide:   1360px;
  --header-h:         72px;     /* 96px from 1200px — see site-shell.css */
  --nav-bp:           1200px;  /* reference only: full nav shows from --bp-lg, drawer below */

  /* Stacking order */
  --z-header: 50;
  --z-float:  40;   /* WhatsApp button — under the header/drawer */
  --z-skip:   100;

  /* ---- 6. Shape & depth ---- */
  --radius-sm:   4px;
  --radius-md:   10px;   /* the mockup's default: buttons, cards, inputs */
  --radius-lg:   10px;   /* the mockup uses 10px everywhere — kept as an alias */
  --radius-pill: 999px;

  --border-w: 1px;

  --shadow-card: 0 1px 2px rgba(28, 38, 36, 0.06), 0 8px 24px rgba(28, 38, 36, 0.06);  /* from mockup */
  --shadow-lift: 0 2px 4px rgba(28, 38, 36, 0.06), 0 16px 40px rgba(28, 38, 36, 0.10);

  /* ---- 7. Motion (#1001686) ----
     Calm, never bouncy: a therapy site should settle, not spring. The
     keyframes + utility classes that use these live in animations.css. */
  --ease:        cubic-bezier(0.2, 0.7, 0.2, 1);   /* default: soft ease-out */
  --ease-out:    var(--ease);                      /* things arriving */
  --ease-in:     cubic-bezier(0.4, 0, 1, 1);       /* things leaving */
  --ease-in-out: cubic-bezier(0.45, 0, 0.25, 1);   /* things moving across / looping */
  --ease-linear: linear;                           /* opacity-only crossfades, video fades */

  --dur-instant: 100ms;  /* press feedback */
  --dur-fast:    150ms;  /* hover colour changes */
  --dur:         250ms;  /* default UI transition (menus, accordions) */
  --dur-slow:    500ms;  /* entrances: fade / slide / scale in */
  --dur-slower:  800ms;  /* scroll reveals, hero intro */
  --dur-slowest: 1200ms; /* background media crossfades */

  --stagger:    80ms;    /* gap between siblings in a staggered group */
  --shift-sm:   4px;     /* nudge: arrows, small popovers */
  --shift:      16px;    /* slide distance for entrances */
  --shift-lg:   32px;    /* big section reveals */
  --scale-from: 0.96;    /* scale-in start */
  --lift:       -2px;    /* hover rise: buttons, clickable cards (#1001688) */
  --zoom:       1.03;    /* hover zoom for a framed photo */
  --press:      0.98;    /* tap / click squeeze: buttons, pills (#1001689) */
  --dur-pulse:  3600ms;  /* one breath of the primary-button pulse (#1001694) */
  --dur-drift:  7000ms;  /* one ripple of the looping background arcs (#1001694) */
  --pulse-ring: 10px;    /* how far the button pulse ring spreads */

  /* ---- 8. Focus ---- */
  --focus-ring:   2px solid var(--color-focus);
  --focus-offset: 2px;

  /* ---- 9. Photo bands (#1001683) ----
     How much of the band's own colour sits over its photo. Set so text
     passes AA against the WORST pixel (pure white or black under it). */
  --photo-wash:       88%;   /* sand + deep-green bands */
  --photo-wash-quiet: 85%;   /* sage band */
}

/* Phones: Mike found body and small text too small (#1001707) —
   lift every size below body by 1px, and the wordmark name line. */
@media (max-width: 599px) {
  :root {
    --step--1:   0.875rem;  /* 13 → 14 */
    --text-note: 1rem;      /* 15 → 16 */
    --text-fine: 0.9375rem; /* 14 → 15 */
  }
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-instant: 0ms; --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; --dur-slower: 0ms; --dur-slowest: 0ms;
    --stagger: 0ms; --shift-sm: 0px; --shift: 0px; --shift-lg: 0px; --scale-from: 1;
    --lift: 0px; --zoom: 1; --press: 1; --dur-pulse: 0ms; --dur-drift: 0ms; --pulse-ring: 0px;
  }
}