/* =========================================================================
   MintHealth / KidneyRelief.Life — Design Tokens
   Color + typography foundations.

   Derived from the live kidneyrelief.life production code (Dr. Priya
   Visweswaran Balakrishnan's masterclass landing surface).

   Two type stacks coexist intentionally:
     · Georgia (serif)        — editorial voice, headlines, story prose.
       Conveys "physician's letter" — the brand's core voice.
     · Helvetica Neue → Arial — UI chrome, badges, forms, captions,
       eyebrows, numbers. The clinical-precise counterpoint.

   Both are system stacks. Roboto, Roboto Slab, and Poppins are loaded
   by the WordPress theme but are NOT used in any custom Dr. Priya
   styling — they're vestigial. Do not introduce them into new work.
   ========================================================================= */

:root {
  /* ──────────────────────────────────────────────────────────────────────
     COLOR — AQUA / TEAL (primary)
     The trustworthy clinical hue. Use for primary actions, links, key
     headings, and the "calm of competence" tone the brand depends on.
     ──────────────────────────────────────────────────────────────────── */
  --aqua-deep:      #0E9490;   /* primary — headlines, link hover, buttons */
  --aqua-mid:       #5EEAD4;   /* borders on cards, accents, dividers      */
  --aqua-pale:      #CCFBF1;   /* surfaces, eyebrow chips, soft callouts   */

  /* ──────────────────────────────────────────────────────────────────────
     COLOR — NAVY / BLUE
     Authority and depth. Navy is the cred bar, dark sections, body color.
     Blue is the secondary informational accent (used sparingly).
     ──────────────────────────────────────────────────────────────────── */
  --navy:           #0C4A6E;   /* darkest — body text, cred bar bg         */
  --navy-mid:       #075985;   /* dark section bg                          */
  --blue-deep:      #0369A1;   /* informational accent (used sparingly)    */
  --blue-mid:       #7DD3FC;   /* info border                              */
  --blue-pale:      #E0F2FE;   /* info surface                             */

  /* ──────────────────────────────────────────────────────────────────────
     COLOR — GREEN
     Outcomes. Improvement. "Lab after." Use for proof-of-result moments —
     never decorative.
     ──────────────────────────────────────────────────────────────────── */
  --green-dark:     #134E4A;
  --green-deep:     #0F766E;
  --green-mid:      #6EE7B7;
  --green-pale:     #D1FAE5;

  /* ──────────────────────────────────────────────────────────────────────
     COLOR — WARM PALETTE (CTA, credential, warning, empathy)
     Cool brand core is teal/navy/green; these warm tones are the
     complements. CTA is sun-yellow with navy type (better contrast and
     more inviting than the previous hard gold). Gold has been demoted
     from CTA to credential / accent. Terracotta + apricot expand the
     emotional register.
     ──────────────────────────────────────────────────────────────────── */
  --sun:             #F5C518;   /* CTA fill · navy type on top              */
  --gold:            #E8A317;   /* credentials, stat numbers, accent        */
  --gold-light:      #FEF3C7;   /* type on navy, warm tint on dark bg       */
  --terracotta:      #D88A5C;   /* WARNING · human-warm caution             */
  --terracotta-pale: #FBDDCB;   /* warning surfaces, soft caution chip      */
  --apricot:         #F4C9A3;   /* empathy surfaces, onboarding             */

  /* ──────────────────────────────────────────────────────────────────────
     COLOR — UTILITY
     ──────────────────────────────────────────────────────────────────── */
  --white:          #FFFFFF;
  --off-white:      #F7FBFB;   /* alt section bg, never pure gray          */
  --light-gray:     #E6F3F4;   /* input borders, dividers                  */
  --red-soft:       #B84040;   /* urgency only (seats filling, before-lab) */

  /* ──────────────────────────────────────────────────────────────────────
     SEMANTIC FG / BG
     Most components should consume these instead of the raw hues above.
     ──────────────────────────────────────────────────────────────────── */
  --fg-1:           var(--navy);        /* default body text             */
  --fg-2:           #0E7490;            /* secondary / captions / sans   */
  --fg-3:           #5C7C8B;            /* tertiary / disclaimers        */
  --fg-on-dark:     var(--gold-light);  /* on navy / aqua-deep backgrounds */
  --fg-on-aqua:     var(--white);

  --bg:             var(--white);
  --bg-alt:         var(--off-white);
  --bg-tint:        var(--aqua-pale);
  --bg-dark:        var(--navy-mid);
  --bg-darker:      var(--navy);

  --accent:         var(--aqua-deep);
  --accent-soft:    var(--aqua-pale);
  --cta:            var(--apricot);
  --cta-fg:         var(--navy);
  --link:           var(--aqua-deep);
  --link-hover:     var(--navy);

  --positive:       var(--green-deep);
  --positive-soft:  var(--green-pale);
  --warning:        var(--terracotta);
  --warning-soft:   var(--terracotta-pale);
  --danger:         var(--red-soft);

  --border:         var(--light-gray);
  --border-strong:  var(--aqua-mid);
  --border-dark:    rgba(255, 255, 255, 0.20);

  /* ──────────────────────────────────────────────────────────────────────
     TYPE — STACKS
     Serif for voice, sans for clinical precision. Both are system stacks
     to load instantly — match the live site exactly.
     ──────────────────────────────────────────────────────────────────── */
  --font-serif:     Georgia, 'Times New Roman', Times, serif;
  --font-sans:      'Helvetica Neue', Helvetica, Arial, sans-serif;
  --font-mono:      ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --font-display:   var(--font-serif);   /* H1–H3, hero, story prose      */
  --font-body:      var(--font-serif);   /* default paragraph             */
  --font-ui:        var(--font-sans);    /* badges, forms, nav, captions  */
  --font-stat:      var(--font-sans);    /* big numbers in stat bar/boxes */

  /* ──────────────────────────────────────────────────────────────────────
     TYPE — SCALE (clamped, fluid)
     Numbered to match the live site's clamp() values where possible.
     ──────────────────────────────────────────────────────────────────── */
  --fs-eyebrow:     0.78rem;             /* 12.5px — eyebrow / overline   */
  --fs-cap:         0.82rem;             /* 13px — caption, badge label   */
  --fs-ui:          0.92rem;             /* 14.7px — nav, small UI        */
  --fs-body-sm:     0.97rem;             /* 15.5px — case-card body, form */
  --fs-body:        1.02rem;             /* 16.3px — section paragraph    */
  --fs-lead:        1.12rem;             /* 17.9px — opening line         */
  --fs-h4:          1.05rem;
  --fs-h3:          1.30rem;
  --fs-h2:          clamp(1.45rem, 2.8vw, 2rem);
  --fs-h1:          clamp(1.80rem, 4.2vw, 2.9rem);   /* hero                */
  --fs-stat:        2rem;                /* gradient stats bar numbers    */
  --fs-stat-lg:     2.2rem;

  /* ──────────────────────────────────────────────────────────────────────
     TYPE — WEIGHTS / LINE / TRACKING
     ──────────────────────────────────────────────────────────────────── */
  --fw-reg:         400;
  --fw-med:         600;   /* nav, sans labels                            */
  --fw-bold:        700;   /* UI emphasis, badges, button copy            */
  --fw-black:       900;   /* stat numbers, step bubbles                  */

  --lh-tight:       1.22;  /* hero h1                                     */
  --lh-snug:        1.35;  /* h2/h3                                       */
  --lh-body:        1.75;  /* default — long-form serif reads at 1.75     */
  --lh-prose:       1.70;  /* call-outs, case bodies                      */

  --tracking-eyebrow: 0.12em;
  --tracking-tag:     0.10em;
  --tracking-cred:    0.03em;

  /* ──────────────────────────────────────────────────────────────────────
     RADIUS
     The system breathes in soft, generous curves. Pills are 20–24px.
     ──────────────────────────────────────────────────────────────────── */
  --r-xs:    6px;
  --r-sm:    8px;     /* inputs, small buttons                            */
  --r-md:    10px;    /* stat boxes, learn cards                          */
  --r-lg:    12px;    /* callouts, case cards                             */
  --r-xl:    14px;    /* form card, step card                             */
  --r-pill:  24px;    /* hero badges, CTA chip in nav                     */
  --r-circle: 50%;

  /* ──────────────────────────────────────────────────────────────────────
     SHADOW
     All shadows tint toward aqua-deep — never neutral gray. This is what
     keeps the surface "clinical-warm" instead of "corporate-cold."
     ──────────────────────────────────────────────────────────────────── */
  --sh-1:   0 2px 10px rgba(14, 148, 144, 0.06);   /* learn card, testi   */
  --sh-2:   0 2px 14px rgba(14, 148, 144, 0.08);   /* case card           */
  --sh-3:   0 3px 18px rgba(14, 148, 144, 0.12);   /* step card           */
  --sh-4:   0 4px 18px rgba(14, 148, 144, 0.18);   /* dr photo            */
  --sh-5:   0 6px 32px rgba(14, 148, 144, 0.14);   /* form card hero      */
  --sh-nav: 0 2px 12px rgba(14, 148, 144, 0.08);   /* sticky nav          */

  /* ──────────────────────────────────────────────────────────────────────
     SPACING — 4pt scale
     ──────────────────────────────────────────────────────────────────── */
  --sp-1:  4px;
  --sp-2:  8px;
  --sp-3:  12px;
  --sp-4:  16px;
  --sp-5:  20px;
  --sp-6:  24px;
  --sp-7:  32px;
  --sp-8:  40px;
  --sp-9:  48px;
  --sp-10: 64px;
  --sp-section: 45px;   /* default section vertical padding              */

  /* ──────────────────────────────────────────────────────────────────────
     LAYOUT
     ──────────────────────────────────────────────────────────────────── */
  --container:       860px;     /* narrow editorial column                */
  --container-wide:  1080px;    /* hero, stat bar, kit screens            */
  --container-app:   1280px;    /* dashboards, masterclass console        */

  /* ──────────────────────────────────────────────────────────────────────
     GRADIENT
     One signature gradient. Used on the stats bar. Do not invent others.
     ──────────────────────────────────────────────────────────────────── */
  --grad-stats: linear-gradient(90deg, var(--aqua-deep) 0%, var(--blue-deep) 100%);
}

/* =========================================================================
   SEMANTIC ELEMENT STYLES
   Apply this stylesheet at the top of any page and you get the brand for
   free on bare HTML. Component-level files refine these further.
   ========================================================================= */

body {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--fg-1);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  font-family: var(--font-display);
  color: var(--accent);
  line-height: var(--lh-snug);
  margin: 0 0 var(--sp-4);
}
h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); color: var(--navy); }
h2 { font-size: var(--fs-h2); color: var(--accent); }
h3 { font-size: var(--fs-h3); color: var(--navy); }
h4 { font-size: var(--fs-h4); color: var(--navy); }

p { margin: 0 0 var(--sp-4); }

a {
  color: var(--link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}
a:hover { color: var(--link-hover); }

small, .caption, .ui {
  font-family: var(--font-ui);
  font-size: var(--fs-cap);
  color: var(--fg-2);
  line-height: var(--lh-snug);
}

.eyebrow {
  font-family: var(--font-ui);
  font-size: var(--fs-eyebrow);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--accent);
}

code, pre { font-family: var(--font-mono); }

/* Brand mark — used in nav and footer */
.brandmark {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--accent);
  letter-spacing: 0.01em;
}
.brandmark em { color: var(--gold); font-style: normal; }