/* ==========================================================================
   DESIGN TOKENS — Global Source of Truth
   Dr. Shrinath Viswanath — Spine Website
   Consolidated from 12 page stylesheets. Loaded once, consumed via var()
   everywhere else. Do not redeclare any of these in page-level CSS.
   ========================================================================== */

:root {

  /* ── Brand Palette ── */
  --c1: #001052;        /* deepest navy  */
  --c2: #0f4c81;        /* primary navy  */
  --c3: #3076a7;        /* mid blue      */
  --c4: #4e9acc;        /* accent blue   */
  --c5: #7ab6da;        /* soft blue     */
  --c6: #90caee;        /* pale sky      */
  --white:     #ffffff;
  --off-white: #f4f8fc; /* page background          */
  --pale:      #eaf4fb; /* subtle tint for cards    */
  --gold:      #c8a96e; /* accent gold              */
  --text:      #0d2a45; /* primary text             */
  --body:      #2c4a60; /* body copy                */
  --muted:     #5a7d95; /* secondary / captions     */
  --wa:        #25D366; /* WhatsApp brand green     */

  /* ── Typography Families ── */
  --f-title: 'Cinzel', serif;       /* display / section headings */
  --f-sub:   'EB Garamond', serif;  /* sub-headings / italics     */
  --f-body:  'Lato', sans-serif;    /* body copy / UI labels      */

  /* ── Font Weights ── */
  --fw-light:    300;
  --fw-regular:  400;  /* CSS default weight; Lato 400 is loaded on every page.
                          The scale previously jumped 300 -> 500, leaving normal
                          text with no token to reference. */
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;

  /* ── Semantic weight aliases ──
        The page stylesheets published to the site reference this --weight-*
        family, which was never defined here. An unresolvable var() with no
        fallback makes the whole declaration invalid at computed-value time,
        so every one of these silently fell back to the INHERITED weight —
        i.e. whatever body happened to be. That is why headings tracked the
        body weight instead of their own. Defined here so they resolve. */
  --weight-h1:         var(--fw-bold);     /* 700 — section/CTA h2 headings   */
  --weight-display:    var(--fw-bold);     /* 700 — hero eyebrow label        */
  --weight-label-bold: var(--fw-bold);     /* 700 — uppercase eyebrow labels  */
  --weight-title-sm:   var(--fw-semibold); /* 600 — small/script sub-headings */
  --weight-body:       var(--fw-medium);   /* 500 — body copy                 */
  --weight-emphasis:   var(--fw-semibold); /* 600 — <em> inside headings      */

  /* ── Fluid Type Scale (mobile floor → desktop ceiling) ── */
  --fs-display: clamp(2.25rem, 5vw + 1rem, 5.5rem); /* 36px–88px */
  --fs-80:      5rem;                                /* 80px */

  --fs-h1:      clamp(1.75rem, 3.5vw + 1rem, 3.5rem); /* 28px–56px */
  /* Synced to the deployed staging tokens.css (ground truth). Drives BOTH
     .hero-headline and .hero-sub so the two halves of the hero sentence always
     render at the same size. 48px -> 60.8px. */
  --hero-sub-size: clamp(3rem, 3.5vw + 1rem, 5rem);   /* 48px–80px */
  --fs-h2:      clamp(1.5rem,  2.5vw + 1rem, 2.5rem); /* 24px–40px */
  --fs-h3:      clamp(1.25rem, 1.75vw + 1rem, 1.875rem); /* 20px–30px */
  --fs-h4:      clamp(1.0625rem, 1vw + 1rem, 1.375rem); /* 17px–22px */
  /* Italic script sub-heading in page heroes (.ab-hero-sub). Aliased to
     --fs-h4 so it matches .pd-hero-tagline / .cd-hero-tagline exactly. */
  --fs-hero-script: var(--fs-h4);                       /* 17px–22px */

  /* ── Fluid UI Sizes — interpolate smoothly from mobile floor to desktop ceiling.
        No per-breakpoint overrides needed; these replace the former fixed values. ── */
  /* Ceiling restored to 18px (the pre-refactor flat value). Raising it to
     22px scaled up every callout/intro paragraph on desktop by ~22%.
     min == max, so this is constant 18px — written plainly rather than as a
     degenerate clamp() that would evaluate to the same thing. */
  --fs-body-large: 1.125rem;                                     /* 18px, flat */
  --fs-body:       clamp(1rem,     0.95rem + 0.25vw, 1.125rem);  /* 16px–18px */
  --fs-small:      clamp(0.875rem, 0.85rem + 0.10vw, 0.9375rem); /* 14px–15px */
  --fs-xs:         clamp(0.75rem,  0.73rem + 0.08vw, 0.8125rem); /* 12px–13px */

  /* ── Line Heights ── */
  --lh-headings: 1.2;
  --lh-body:     1.6;
  --lh-ui:       1;

  /* ── Spacing Scale — desktop baseline ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;

  /* ── Shape & Elevation ── */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 2px 8px  rgba(15, 76, 129, 0.06);
  --shadow-md: 0 4px 20px rgba(15, 76, 129, 0.08);
  --shadow-lg: 0 12px 48px rgba(15, 76, 129, 0.15);

  /* ── Homepage hero — named values, no magic numbers ──
        Every one of these is derived, not picked:
        --hero-cred-shadow-reach = the card's own box-shadow extent
          (12px offset + 40px blur = 52px). --hero-panel-gap is floored at this
          value so the shadow can never paint over the stat strip below.
        --hero-cred-overlap = how far the credential card sits over the
          portrait. The card is IN FLOW, so the panel grows if its text wraps.
        --hero-panel-gap = clearance between the portrait panel and the strip.
        --hero-pad-block-* = the hero section's own vertical rhythm; these do
          the work of separating the copy cluster from the rest of the page.
        --hero-sentence-gap = the break between the two headline sentences.
          Deliberately in `em` so it resolves against the headline's own size
          and holds a constant ratio to the leading at every breakpoint.

        CALIBRATED against hero-layout-reference.html, measured at 1440px.
        Every value below is the number Playwright read off the reference, not
        an estimate. Where the reference states a flat px (it is a fixed 1440
        mockup), the token keeps a fluid clamp() whose UPPER bound equals the
        measured value, so the reference is matched exactly at 1440+ and the
        design still scales down instead of stepping. */
  --hero-cred-shadow-reach: 3.25rem;                  /* 52px — the card's own shadow (12px offset + 40px blur) */

  /* ── Hero grid geometry (measured from the reference) ── */
  --hero-col-split:         0.86fr;                       /* right/left track ratio → 53.76 / 46.24 */
  --hero-col-gap:           clamp(2rem, 5vw, 4.5rem);     /* 32px–72px; reference = 72px @1440 */
  --hero-portrait-aspect:   4 / 4.7;                      /* reference portrait-wrap aspect-ratio */
  --hero-cred-width:        88%;                          /* card width as a % of the portrait */
  --hero-cred-overlap:      4rem;                         /* 64px — the reference's margin-block-start,
                                                             flat at every width it renders, so flat here */

  /* Gap between the hero cluster and the trust strip. The reference reads a
     constant 112px from grid bottom to strip top at all six widths.
     Wrapped in max() so it can never fall below the credential card's own
     shadow extent — that invariant is now structural rather than a separate
     padding reserve on the panel. */
  --hero-panel-gap:         max(var(--hero-cred-shadow-reach), clamp(4rem, 7.778vw, 7rem)); /* 64px–112px */

  --hero-pad-block-start:   clamp(4rem, 6.667vw, 6rem);   /* 64px–96px; reference = 96px @1440 */
  --hero-pad-block-end:     clamp(3rem, 5vw, 5rem);       /* 48px–80px — NOT retuned: in this build the
                                                             trust strip lives INSIDE .hero, so this is the
                                                             space BELOW the strip, which the reference
                                                             (strip is a sibling) does not define. */

  /* ── Hero copy-column internal rhythm (measured from the reference) ── */
  --hero-eyebrow-gap:       1.25rem;   /* 20px — eyebrow → headline */
  --hero-sentence-gap:      0.45em;    /* headline → sub. Reference uses 0.45em too; kept in em so the
                                          break holds a constant ratio to the leading at every size. */
  --hero-lede-gap:          1.375rem;  /* 22px — sub → paragraph */
  --hero-cta-gap:           1.75rem;   /* 28px — paragraph → CTA row */

  /* ── Layout ── */
  --container:    1280px;
  --nav-total-h:  72px;

  /* ── Page-scoped aliases (consumed by inner-page components) ── */
  --off:          var(--off-white);
  --shadow:       0 4px 24px  rgba(15, 76, 129, 0.08);
  --radius:       8px;

  /* orthopedic page */
  --oc-container: 1200px;
  --oc-shadow-lg: 0 12px 48px rgba(15, 76, 129, 0.14);

  /* book-a-consultation page */
  --bc-container: 1200px;
  --bc-shadow:    0 4px 24px  rgba(15, 76, 129, 0.08);
  --bc-shadow-lg: 0 12px 48px rgba(15, 76, 129, 0.14);

  /* ── Shadcn / Tailwind HSL bridge ── */
  --background: 214 60% 97%;
  --foreground:  210 83% 15%;
  --border:      210 40% 88%;
  --input:       210 40% 88%;
  --ring:        210 63% 28%;
  --card:             0 0% 100%;
  --card-foreground:  210 83% 15%;
  --popover:          0 0% 100%;
  --popover-foreground: 210 83% 15%;
  --primary:          210 73% 28%;
  --primary-foreground: 0 0% 100%;
  --secondary:        210 40% 94%;
  --secondary-foreground: 210 73% 28%;
  --muted-hsl:         210 30% 91%;  /* renamed: collided with --muted brand color above */
  --muted-foreground: 210 25% 45%;
  --accent:           210 40% 94%;
  --accent-foreground: 210 73% 28%;
  --destructive:      0 84% 60%;
  --destructive-foreground: 0 0% 100%;
  --chart-1: 210 73% 28%;
  --chart-2: 200 63% 42%;
  --chart-3: 190 53% 52%;
  --chart-4:  40 60% 60%;
  --chart-5: 160 50% 40%;
  --sidebar:          210 73% 28%;
  --sidebar-foreground: 0 0% 100%;
  --sidebar-border:   210 60% 35%;
  --sidebar-primary:  210 50% 20%;
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent:   210 60% 35%;
  --sidebar-accent-foreground: 0 0% 100%;
  --sidebar-ring:     200 63% 57%;
}

/* ==========================================================================
   ROOT FONT-SIZE — neutralise Astra's responsive shrink
   ==========================================================================
   The Astra parent emits, in its inline <style id="astra-theme-css-inline-css">:

       @media (max-width: 921px) { html { font-size: 91.2%  } }
       @media (max-width: 544px) { html { font-size: 91.2%  } }

   91.2% of 16px = 14.592px. Because virtually every size in this design
   system is expressed in rem, that single rule shrank ALL text — nav, body,
   labels, cards, buttons — by ~8.8% on every viewport under 921px, and it
   did so as a hard step rather than a gradual change. The fluid clamp()
   scales were being compressed by an invisible multiplier.

   Restoring 100% (the same value Astra itself uses above 921px) removes the
   step and lets the clamp() ramps deliver their designed sizes.

   Why 100% and not 16px: 100% inherits the reader's own browser font-size
   preference — it resolves to 16px by default, but honours a user who has
   set something larger. Hard-coding 16px would silently discard that, which
   is the accessibility bug Astra's rule already introduces.

   Why :root and not html: :root scores (0,1,0) against Astra's html at
   (0,0,1), so this wins on specificity and does not depend on stylesheet
   order surviving future plugin or enqueue changes. No !important needed.
   ========================================================================== */
:root {
  font-size: 100%;
}