/* ==========================================================================
   HealthCalc — foundation
   Palette and type sampled from the supplied reference:
   pale mint ground, deep-navy ink, emerald brand, pastel category system.
   ========================================================================== */

/* ------------------------------------------------------------- fonts */
/* Google Fonts, loaded with preconnect + display=swap. If the network is
   unavailable the stack below falls back to the platform UI font, so the
   page never renders unstyled or invisible text. */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  /* ---- ground ---- */
  --bg:          #F1F8F5;
  --bg-2:        #E8F4EF;
  --surface:     #FFFFFF;
  --surface-2:   #F6FAF8;
  --surface-3:   #EFF6F2;

  /* ---- ink ---- */
  --ink:         #0E2A3D;   /* headlines — deep navy */
  --ink-2:       #42606F;   /* body copy */
  --ink-3:       #7A96A5;   /* muted */
  --ink-4:       #A8BCC7;   /* placeholder / disabled */

  /* ---- brand ---- */
  --brand:       #0E9E6E;
  --brand-2:     #16C08A;
  --brand-3:     #3FE0A8;
  --brand-ink:   #086B4A;
  --brand-soft:  #D5F5E7;

  /* ---- accent (the "Your Way" green is distinctly deeper) ---- */
  --accent:      #0A8F72;

  /* ---- pastel category system — one hue per family ---- */
  --c-nutrition: #E4F7EE;  --c-nutrition-ink: #0C7A52;  --c-nutrition-ic: #12B981;
  --c-body:      #E8F1FD;  --c-body-ink:      #2A6BB5;  --c-body-ic:      #4A93E8;
  --c-fitness:   #EFEAFC;  --c-fitness-ink:   #6B4FC4;  --c-fitness-ic:   #8B6FE8;
  --c-metabo:    #FDEEE2;  --c-metabo-ink:    #C1621C;  --c-metabo-ic:    #F5883C;
  --c-hydra:     #E6F3FB;  --c-hydra-ink:     #1E76B8;  --c-hydra-ic:     #35A0E0;
  --c-heart:     #FDE9E9;  --c-heart-ink:     #C14B4B;  --c-heart-ic:     #F06A6A;
  --c-sleep:     #EDEAFB;  --c-sleep-ink:     #5A4BB0;  --c-sleep-ic:     #7A6BD8;
  --c-age:       #FDF3DF;  --c-age-ink:       #A9741B;  --c-age-ic:       #E0A63A;
  --c-measure:   #E2F6F0;  --c-measure-ink:   #12796A;  --c-measure-ic:   #17B39C;
  --c-risk:      #E7F2FC;  --c-risk-ink:      #1F6FA8;  --c-risk-ic:      #3E9BD6;
  --c-wellness:  #E8F6E4;  --c-wellness-ink:  #4C7A2E;  --c-wellness-ic:  #6BB03F;
  --c-more:      #F0F3F5;  --c-more-ink:      #5A6B78;  --c-more-ic:      #8FA2AE;

  /* ---- lines + depth ---- */
  --line:        #E1EDE7;
  --line-2:      #CFE0D8;
  --sh-xs:       0 1px 2px rgba(14,42,61,.05);
  --sh-sm:       0 2px 8px rgba(14,42,61,.05);
  --sh:          0 6px 20px rgba(14,42,61,.07);
  --sh-md:       0 14px 36px rgba(14,42,61,.09);
  --sh-lg:       0 28px 64px rgba(14,42,61,.11);
  --sh-brand:    0 10px 26px rgba(14,158,110,.28);
  --sh-inset:    inset 0 1px 0 rgba(255,255,255,.7);

  /* ---- semantic aliases ----
     Two naming schemes now coexist: components.css was written against
     --muted / --brand / --sh, while calculator.css reads --muted and
     --danger. Aliasing here means a new stylesheet can use either the
     semantic or the raw token name and both resolve, instead of silently
     rendering as an invalid/unset value. */
  --muted:      var(--ink-3);
  --muted-2:    var(--ink-4);
  --body:       var(--ink-2);
  --danger:     #C14B4B;
  --ok:         #0E9E6E;

  /* --sp-7 and --sp-9 are used by calculator.css but were missing from the
     scale; added here so the rhythm stays on the same 4px grid as the rest
     rather than silently collapsing to 0. */
  --sp-7:   28px;
  --sp-9:   36px;

  /* ---- geometry ---- */
  --r-xs:   8px;
  --r-sm:   12px;
  --r:      16px;
  --r-lg:   22px;
  --r-xl:   28px;
  --r-2xl:  34px;

  /* ---- type ---- */
  --font: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI",
          Roboto, "Helvetica Neue", Arial, sans-serif;

  /* ---- spacing scale ---- */
  --sp-1: 4px;   --sp-2: 8px;   --sp-3: 12px;  --sp-4: 16px;
  --sp-5: 20px;  --sp-6: 24px;  --sp-8: 32px;  --sp-10: 40px;
  --sp-12: 48px; --sp-16: 64px; --sp-20: 80px; --sp-24: 96px;

  --wrap: 1240px;
  --nav-h: 72px;
}

/* ------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  /* Native scrolling, including anchors: instant jumps, no tween.
     scroll-padding-top still applies so an anchor target clears the sticky
     header - that is layout, not animation, so it stays. */
  scroll-behavior: auto;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.62;
  color: var(--ink-2);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4, h5 {
  margin: 0;
  color: var(--ink);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.028em;
}

p { margin: 0; }

a { color: var(--brand-ink); text-decoration: none; }

button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }

ul { margin: 0; padding: 0; list-style: none; }

:focus-visible {
  outline: 3px solid var(--brand-2);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}

::selection { background: var(--brand-3); color: var(--ink); }

/* ------------------------------------------------------- utilities */
.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--sp-6);
}

.sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 999;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  padding: 14px 22px;
  border-radius: 0 0 var(--r) 0;
  box-shadow: var(--sh-md);
}
.skip:focus { left: 0; }

/* Line-icon defaults — every inline icon svg inherits one consistent stroke.
   Filled icons opt out with the .is-fill class. */
.ico {
  width: 20px;
  height: 20px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.85;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ico.is-fill { fill: currentColor; stroke: none; }

/* ====================================================== DARK THEME */
/* Token-only overrides: no component rule is duplicated, so every component
   added later inherits dark mode automatically. */
.is-dark {
  --bg:         #08161F;
  --bg-2:       #0C1E2A;
  --surface:    #102734;
  --surface-2:  #16323F;
  --surface-3:  #1B3B49;
  --ink:        #EAF4F9;
  --ink-2:      #AFC6D2;
  --ink-3:      #7F9AA9;
  --ink-4:      #5C7787;
  --brand-ink:  #4ED9A4;
  --brand-soft: #0C3A2E;
  --accent:     #34D6A0;
  --line:       #1E3D4D;
  --line-2:     #2B5062;
  --c-nutrition: #0D2F26;  --c-nutrition-ink: #55D9A6;
  --c-body:      #10263D;  --c-body-ink:      #6FB0EE;
  --c-fitness:   #1E1A3A;  --c-fitness-ink:   #A08CEE;
  --c-metabo:    #38220F;  --c-metabo-ink:    #F0A063;
  --c-hydra:     #0E2839;  --c-hydra-ink:     #5CB2E8;
  --c-heart:     #331A1C;  --c-heart-ink:     #F08A8A;
  --c-sleep:     #1D1A38;  --c-sleep-ink:     #9A8BE8;
  --c-age:       #33260D;  --c-age-ink:       #E8BA5A;
  --c-measure:   #0A2E2C;  --c-measure-ink:   #2FCFB6;
  --c-risk:      #0F2637;  --c-risk-ink:      #62B2E4;
  --c-wellness:  #162C11;  --c-wellness-ink:  #8BCF5C;
  --c-more:      #1B2C35;  --c-more-ink:      #93AABA;
  --sh-xs: 0 1px 2px rgba(0,0,0,.3);
  --sh-sm: 0 2px 8px rgba(0,0,0,.32);
  --sh:    0 6px 20px rgba(0,0,0,.34);
  --sh-md: 0 14px 36px rgba(0,0,0,.4);
  --sh-lg: 0 28px 64px rgba(0,0,0,.46);
  --sh-inset: inset 0 1px 0 rgba(255,255,255,.05);
  color-scheme: dark;
}
.is-dark body { background: var(--bg); color: var(--ink-2); }
.is-dark .nav { background: rgba(8,22,31,.86); }

/* --------------------------------------------------- reduced motion */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }
  /* JS also checks this and skips GSAP timelines / parallax entirely. */
}