/* ==========================================================================
   Ari Barook Rehabilitation — Design Tokens
   Every value here comes from design.md. Change design.md first, then mirror
   it here. Never introduce a color, size, radius or shadow that isn't below.
   ========================================================================== */

:root {
  /* ---- Color palette --------------------------------------------------
     Ari's own hex codes. The previous chocolate-and-pink scheme was dropped
     at her request: she felt the pinks read too feminine and might put off
     male clients, and she did not want the orange accent. The accent is now
     a green, as she asked.                                                  */
  --color-fern:   #E2E9DD;  /* Light green  — page background               */
  --color-moss:   #5D7B51;  /* Darker green — accent, the one "go" colour   */
  --color-bark:   #604C39;  /* Brown        — primary, headings, buttons    */
  --color-olive:  #524F2D;  /* Olive green  — dark bands, footer, ticker    */

  /* Derived from the four above so the system has a surface, a text colour,
     a muted tone and a hairline that all sit in the same family. */
  --color-mist:   #EFF3EA;  /* Surface — a lighter tint of Fern             */
  --color-ink:    #2B2A1F;  /* Text primary                                 */
  --color-lichen: #5A6153;  /* Text secondary. Kept dark enough for AA      */
  --color-line:   #C9D4C1;  /* Border / divider                             */

  --color-amber:  #A9762B;  /* Warning — the tentative-pricing note         */
  --color-brick:  #A34A3C;  /* Danger                                       */

  /* ---- Semantic aliases (what styles.css actually reaches for) -------- */
  --bg:          var(--color-fern);
  --surface:     var(--color-mist);
  --text:        var(--color-ink);
  --text-muted:  var(--color-lichen);
  --border:      var(--color-line);
  --brand:       var(--color-bark);
  --accent:      var(--color-moss);
  --dark:        var(--color-olive);

  /* ---- Typography -----------------------------------------------------
     Matches the pryzm.design stack at the client's direction: Poppins for
     headings, Inter for body, Geist Mono for small labels. Read off that
     site's own CSS, where --font-heading is Poppins, --font-sans is Inter
     and --font-mono is Geist Mono.
     - Display: Poppins, a geometric sans carried by weight rather than by
       the contrast a serif gave it
     - Body/UI: Inter
     - Label: Geist Mono, for eyebrows, prices and small caps
     - Wordmark: bold Arial, specifically requested for the logo             */
  --font-display: 'Poppins', 'Helvetica Neue', Arial, sans-serif;
  --font-body:    'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-label:   'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-mono:    'Geist Mono', 'SF Mono', Menlo, Consolas, monospace;
  --font-wordmark: Arial, 'Helvetica Neue', Helvetica, sans-serif;

  /* Display and H1 are fluid; the ceilings are design.md's 88px / 56px.
     Floors chosen so a 320px screen never runs the hero H1 past three lines. */
  --fs-display: clamp(2.5rem, 4vw + 1.6rem, 5.5rem);   /* 40 → 88px */
  --fs-h1:      clamp(2rem, 2.5vw + 1.35rem, 3.5rem);  /* 32 → 56px */
  --fs-h2:      clamp(1.75rem, 1.6vw + 1.2rem, 2.25rem);/* 28 → 36px */
  --fs-h3:      1.75rem;      /* 28px */
  --fs-h4:      1.25rem;      /* 20px */
  --fs-body-lg: 1.25rem;      /* 20px */
  --fs-body:    1.0625rem;    /* 17px */
  --fs-small:   0.9375rem;    /* 15px */
  --fs-caption: 0.75rem;      /* 12px */

  --lh-display: 1.16;
  --lh-h1:      1.15;
  --lh-h2:      1.15;
  --lh-h3:      1.2;
  --lh-h4:      1.3;
  --lh-body:    1.65;
  --lh-small:   1.6;
  --lh-caption: 1.4;

  --ls-display: -0.03em;
  --ls-h1:      -0.02em;
  --ls-small:   0.01em;
  --ls-caption: 0.06em;

  --fw-display: 700;
  --fw-heading: 600;
  --fw-caption: 600;   /* eyebrows carry weight now, see .eyebrow in styles.css */
  --fw-small:   400;
  --fw-body:    400;

  /* ---- Spacing & grid (design.md § Spacing & Grid) --------------------- */
  --sp-1:  8px;
  --sp-2:  16px;
  --sp-3:  24px;
  --sp-4:  32px;
  --sp-6:  48px;
  --sp-8:  64px;
  --sp-12: 96px;
  --sp-16: 128px;

  --container: 1200px;
  --gutter:    24px;
  --measure:   65ch;

  /* ---- Radius (design.md § Component & UI Patterns) ------------------- */
  --radius-sm:   8px;
  --radius-md:   16px;
  --radius-lg:   24px;
  --radius-full: 999px;

  /* ---- Elevation ------------------------------------------------------ */
  --shadow-sm: 0 2px 8px rgba(43, 42, 31, 0.08);
  --shadow-md: 0 8px 24px rgba(43, 42, 31, 0.14);

  /* ---- Motion --------------------------------------------------------- */
  --ease:     cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 180ms;
  --dur-mid:  300ms;
  --dur-slow: 600ms;

  /* ---- Chrome --------------------------------------------------------- */
  --nav-h: 76px;
}

@media (min-width: 768px) {
  :root { --gutter: 32px; --nav-h: 88px; }
}