/* Vividh Health — design tokens v2
 * Premium-friendly light theme. Mobile-first. Inter typography.
 * Palette: brand green #1b5232, brand gold #c49c3a.
 *
 * Token shape:
 *   --vh-color-{role}-{step}    50/100/200/300/400/500/600/700/800/900
 *   --vh-space-{n}              4n px from 1..16  (4..64)
 *   --vh-radius-{xs|sm|md|lg|xl|pill}
 *   --vh-shadow-{1..4}
 *   --vh-text-{2xs..2xl}        font-size scale
 *   --vh-leading-{tight..loose} line-heights
 *   --vh-ease, --vh-dur-{fast|base|slow}
 */

:root {
  /* ---------- Brand: green ---------- */
  --vh-green-50:  #ebf2ee;
  --vh-green-100: #d3e2d8;
  --vh-green-200: #a7c4b1;
  --vh-green-300: #7ba68b;
  --vh-green-400: #4f8865;
  --vh-green-500: #1b5232;  /* brand primary */
  --vh-green-600: #17472b;
  --vh-green-700: #133b25;
  --vh-green-800: #0f301d;
  --vh-green-900: #0a2014;

  /* ---------- Brand: gold ---------- */
  --vh-gold-50:  #faf3e0;
  --vh-gold-100: #f4e4b8;
  --vh-gold-200: #ecd086;
  --vh-gold-300: #e0bd5d;
  --vh-gold-400: #d4ac42;
  --vh-gold-500: #c49c3a;  /* brand secondary */
  --vh-gold-600: #a78431;
  --vh-gold-700: #876a27;
  --vh-gold-800: #67521e;
  --vh-gold-900: #483915;

  /* ---------- Neutrals (warm; off-white feel) ---------- */
  --vh-neutral-0:   #ffffff;
  --vh-neutral-50:  #fbfaf6;
  --vh-neutral-100: #f4f3ee;
  --vh-neutral-200: #e7e6df;
  --vh-neutral-300: #d3d1c7;
  --vh-neutral-400: #a8a69b;
  --vh-neutral-500: #7d7c72;
  --vh-neutral-600: #5b6360;
  --vh-neutral-700: #3f4541;
  --vh-neutral-800: #262a27;
  --vh-neutral-900: #1c1f1b;

  /* ---------- Semantic ---------- */
  --vh-success:        #0f8a55;
  --vh-success-50:     #e6f4ed;
  --vh-warning:        #b06b00;
  --vh-warning-50:     #fdf3d9;
  --vh-danger:         #b32418;
  --vh-danger-50:      #fde2e0;
  --vh-info:           #2c4ad0;
  --vh-info-50:        #e6ebfa;

  /* ---------- Product types (hue per channel) ---------- */
  --vh-product-lab:     #0EA5A4;
  --vh-product-package: #8B5CF6;
  --vh-product-doctor:  #4F46E5;
  --vh-product-physio:  #F59E0B;
  --vh-product-otc:     #10B981;

  /* ---------- Role aliases (use these in CSS) ---------- */
  --vh-primary:        var(--vh-green-500);
  --vh-primary-soft:   var(--vh-green-50);
  --vh-primary-on:     var(--vh-neutral-0);
  --vh-secondary:      var(--vh-gold-500);
  --vh-secondary-soft: var(--vh-gold-50);
  --vh-bg:             var(--vh-neutral-0);
  --vh-bg-elevated:    var(--vh-neutral-0);
  --vh-bg-muted:       var(--vh-neutral-100);
  --vh-border:         var(--vh-neutral-200);
  --vh-border-strong:  var(--vh-neutral-300);
  --vh-text:           var(--vh-neutral-900);
  --vh-text-muted:     var(--vh-neutral-600);
  --vh-text-subtle:    var(--vh-neutral-500);
  --vh-text-on-brand:  var(--vh-neutral-0);
  --vh-focus:          color-mix(in srgb, var(--vh-primary) 28%, transparent);

  /* ---------- Typography ---------- */
  --vh-font: "Inter", "Inter Tight", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --vh-font-num: "Inter", ui-monospace, "SF Mono", Menlo, monospace;

  --vh-text-2xs: 0.6875rem;  /* 11px */
  --vh-text-xs:  0.75rem;    /* 12px */
  --vh-text-sm:  0.8125rem;  /* 13px */
  --vh-text-base:0.9375rem;  /* 15px — body */
  --vh-text-md:  1rem;       /* 16px */
  --vh-text-lg:  1.125rem;   /* 18px */
  --vh-text-xl:  1.375rem;   /* 22px */
  --vh-text-2xl: 1.75rem;    /* 28px — h1 */
  --vh-text-3xl: 2.25rem;    /* 36px — display */

  --vh-leading-tight: 1.15;
  --vh-leading-snug:  1.3;
  --vh-leading-base:  1.5;
  --vh-leading-loose: 1.7;

  --vh-tracking-tight: -0.015em;
  --vh-tracking-base:  0;
  --vh-tracking-wide:  0.04em;

  --vh-weight-regular: 400;
  --vh-weight-medium:  500;
  --vh-weight-semibold:600;
  --vh-weight-bold:    700;

  /* ---------- 4pt-grid spacing ---------- */
  --vh-space-1:  4px;
  --vh-space-2:  8px;
  --vh-space-3:  12px;
  --vh-space-4:  16px;
  --vh-space-5:  20px;
  --vh-space-6:  24px;
  --vh-space-8:  32px;
  --vh-space-10: 40px;
  --vh-space-12: 48px;
  --vh-space-16: 64px;

  /* ---------- Radius ---------- */
  --vh-radius-xs:  4px;
  --vh-radius-sm:  8px;
  --vh-radius-md:  12px;
  --vh-radius-lg:  16px;
  --vh-radius-xl:  20px;
  --vh-radius-pill:999px;

  /* Back-compat: existing templates reference --vh-radius / --vh-radius-sm */
  --vh-radius:    var(--vh-radius-md);

  /* ---------- Elevation (shadows) ----------
   * All four tiers share the hero's soft two-layer aesthetic:
   *   1) close 1-2px ambient (gives the edge definition)
   *   2) far diffused drop (gives the lift)
   * Scale up blur + Y-offset for each tier; opacity stays gentle. */
  --vh-shadow-1: 0 1px 2px rgba(15, 22, 18, 0.04),
                 0 4px 12px -4px rgba(15, 22, 18, 0.06);
  --vh-shadow-2: 0 1px 2px rgba(15, 22, 18, 0.04),
                 0 8px 24px -6px rgba(15, 22, 18, 0.10);     /* hero */
  --vh-shadow-3: 0 2px 6px rgba(15, 22, 18, 0.06),
                 0 14px 36px -8px rgba(15, 22, 18, 0.14);
  --vh-shadow-4: 0 4px 10px rgba(15, 22, 18, 0.08),
                 0 24px 56px -12px rgba(15, 22, 18, 0.18);
  --vh-shadow-inset: inset 0 1px 0 rgba(255,255,255,0.5);

  /* ---------- Motion ---------- */
  --vh-ease:        cubic-bezier(0.2, 0.7, 0.2, 1);
  --vh-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
  --vh-dur-fast:    120ms;
  --vh-dur-base:    200ms;
  --vh-dur-slow:    320ms;

  /* ---------- Layout ---------- */
  --vh-container:   720px;
  --vh-tabbar-h:    64px;
  --vh-appbar-h:    56px;
  --vh-safe-bottom: env(safe-area-inset-bottom, 0px);

  /* Back-compat names used by older CSS */
  --vh-primary-50:  var(--vh-green-50);
  --vh-primary-700: var(--vh-green-700);
  --vh-secondary-50:var(--vh-gold-50);
  --vh-surface:     var(--vh-bg-elevated);
  --vh-surface-2:   var(--vh-bg-muted);
}

/* ============================================================
 * v3 — Apple-glass theme system
 * Adds: tertiary palette, gradients, glow halos, glass surfaces,
 * cinematic motion, squircle radius, golden-ratio whitespace,
 * Geist Mono numerals, and a full dark-mode override.
 * ========================================================== */

@font-face {
  font-family: "Geist Mono";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("/static/fonts/GeistMono-Variable.woff2") format("woff2-variations"),
       url("/static/fonts/GeistMono-Variable.woff2") format("woff2");
}

:root {
  /* ---------- Tertiary palette (NEW) ---------- */
  --vh-teal-50:   #e6f6f4;
  --vh-teal-100:  #b9e6e0;
  --vh-teal-300:  #7ccfc4;
  --vh-teal-500:  #2bb1a6;
  --vh-teal-700:  #1d7d76;
  --vh-teal-900:  #0e413d;

  --vh-coral-50:  #fff0eb;
  --vh-coral-100: #ffd6c8;
  --vh-coral-300: #ffb097;
  --vh-coral-500: #ff8b6b;
  --vh-coral-700: #c25638;
  --vh-coral-900: #6b2614;

  --vh-tertiary-teal:  var(--vh-teal-500);
  --vh-tertiary-coral: var(--vh-coral-500);

  /* ---------- Display + mono fonts ---------- */
  --vh-font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --vh-text-display: 2.75rem;   /* 44px hero h1 */
  --vh-text-hero:    3.5rem;    /* 56px display */
  --vh-tracking-display: -0.025em;

  /* ---------- Golden-ratio whitespace (φ ≈ 1.618) ----------
   * Use these for major rhythm (section breathing, hero pad).
   * Existing 4pt --vh-space-* stays for component-level. */
  --vh-space-phi-1: 16px;
  --vh-space-phi-2: 26px;
  --vh-space-phi-3: 42px;
  --vh-space-phi-4: 68px;
  --vh-space-phi-5: 110px;

  --vh-ratio-major: 61.8%;
  --vh-ratio-minor: 38.2%;

  /* ---------- Squircle + softer radii ---------- */
  --vh-radius-squircle: 32px;
  --vh-radius-2xl: 28px;
  --vh-radius-3xl: 36px;

  /* ---------- Cinematic motion ---------- */
  --vh-ease-cinematic: cubic-bezier(0.4, 0, 0.2, 1);
  --vh-ease-soft:      cubic-bezier(0.16, 1, 0.3, 1);
  --vh-dur-cinematic:  380ms;
  --vh-dur-cinematic-long: 520ms;

  /* ---------- Gradient tokens (subtle) ----------
   * Use sparingly: hero numerals, CTAs, accent bars. */
  --vh-grad-brand:      linear-gradient(135deg, var(--vh-green-500) 0%, var(--vh-green-700) 100%);
  --vh-grad-gold:       linear-gradient(135deg, var(--vh-gold-400) 0%, var(--vh-gold-600) 100%);
  --vh-grad-teal:       linear-gradient(135deg, var(--vh-teal-500) 0%, var(--vh-teal-700) 100%);
  --vh-grad-coral:      linear-gradient(135deg, var(--vh-coral-500) 0%, var(--vh-coral-700) 100%);
  --vh-grad-aurora:     linear-gradient(135deg, var(--vh-green-500) 0%, var(--vh-teal-500) 50%, var(--vh-gold-500) 100%);
  --vh-grad-sheen:      linear-gradient(135deg, rgba(255,255,255,0.42) 0%, rgba(255,255,255,0) 60%);
  --vh-grad-text-brand: linear-gradient(180deg, var(--vh-green-500) 0%, var(--vh-green-700) 100%);
  --vh-grad-text-gold:  linear-gradient(180deg, var(--vh-gold-600) 0%, var(--vh-gold-800) 100%);

  /* ---------- Glow halos (colored shadows, accent-aware) ----------
   * Pattern: subtle outer glow + crisp inset hairline. */
  --vh-glow-primary:  0 12px 32px -8px color-mix(in srgb, var(--vh-green-500) 38%, transparent),
                      0 2px 6px  -2px color-mix(in srgb, var(--vh-green-500) 18%, transparent);
  --vh-glow-gold:     0 12px 32px -8px color-mix(in srgb, var(--vh-gold-500) 38%, transparent),
                      0 2px 6px  -2px color-mix(in srgb, var(--vh-gold-500) 18%, transparent);
  --vh-glow-teal:     0 12px 32px -8px color-mix(in srgb, var(--vh-teal-500) 38%, transparent),
                      0 2px 6px  -2px color-mix(in srgb, var(--vh-teal-500) 18%, transparent);
  --vh-glow-coral:    0 12px 32px -8px color-mix(in srgb, var(--vh-coral-500) 38%, transparent),
                      0 2px 6px  -2px color-mix(in srgb, var(--vh-coral-500) 18%, transparent);
  --vh-glow-neutral:  0 8px 24px -6px rgba(15, 22, 18, 0.10),
                      0 1px 2px       rgba(15, 22, 18, 0.04);
  --vh-glow-focus:    0 0 0 3px var(--vh-focus);

  /* ---------- Glass surfaces ---------- */
  --vh-glass-bg:        rgba(255, 255, 255, 0.72);
  --vh-glass-bg-strong: rgba(255, 255, 255, 0.86);
  --vh-glass-border:    rgba(255, 255, 255, 0.55);
  --vh-glass-blur:      saturate(160%) blur(14px);
  --vh-glass-blur-lg:   saturate(180%) blur(22px);

  /* ---------- Card / surface aliases (used by primitives) ---------- */
  --vh-card-bg:        var(--vh-bg-elevated);
  --vh-card-border:    var(--vh-border);
  --vh-card-radius:    var(--vh-radius-squircle);
  --vh-card-shadow:    var(--vh-glow-neutral);
  --vh-button-radius:  var(--vh-radius-pill);
}

/* ============================================================
 * Dark theme — charcoal #14161a base, glow-accent forward
 * Activated by data-theme="dark" OR data-theme="auto" + system pref.
 * ========================================================== */

:root[data-theme="dark"],
:root[data-theme="auto"] {
  /* placeholder so the rule below can override consistently */
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="auto"] {
    --vh-bg:             #14161a;
    --vh-bg-elevated:    #1b1e23;
    --vh-bg-muted:       #23272e;
    --vh-border:         #2c3138;
    --vh-border-strong:  #3a4049;
    --vh-text:           #ecedef;
    --vh-text-muted:     #a4a8b0;
    --vh-text-subtle:    #71757d;
    --vh-text-on-brand:  #ffffff;
    --vh-focus:          color-mix(in srgb, var(--vh-green-300) 38%, transparent);

    /* Brand stays the same hue but lifts in dark mode for contrast */
    --vh-primary:        var(--vh-green-300);
    --vh-primary-soft:   #1d2a22;
    --vh-secondary-soft: #2a2418;

    /* Glass becomes dark-translucent */
    --vh-glass-bg:        rgba(27, 30, 35, 0.62);
    --vh-glass-bg-strong: rgba(27, 30, 35, 0.86);
    --vh-glass-border:    rgba(255, 255, 255, 0.08);
    --vh-glass-blur:      saturate(140%) blur(14px);
    --vh-glass-blur-lg:   saturate(160%) blur(22px);

    /* Glow halos brighten in dark for visibility */
    --vh-glow-primary:  0 16px 40px -10px color-mix(in srgb, var(--vh-green-400) 60%, transparent),
                        0 2px 8px   -2px color-mix(in srgb, var(--vh-green-400) 30%, transparent);
    --vh-glow-gold:     0 16px 40px -10px color-mix(in srgb, var(--vh-gold-400)  60%, transparent),
                        0 2px 8px   -2px color-mix(in srgb, var(--vh-gold-400)  30%, transparent);
    --vh-glow-teal:     0 16px 40px -10px color-mix(in srgb, var(--vh-teal-300)  60%, transparent),
                        0 2px 8px   -2px color-mix(in srgb, var(--vh-teal-300)  30%, transparent);
    --vh-glow-coral:    0 16px 40px -10px color-mix(in srgb, var(--vh-coral-300) 60%, transparent),
                        0 2px 8px   -2px color-mix(in srgb, var(--vh-coral-300) 30%, transparent);
    --vh-glow-neutral:  0 12px 28px -8px rgba(0, 0, 0, 0.55),
                        0 2px 6px      rgba(0, 0, 0, 0.30);

    /* Sheen on dark cards = soft white-light gradient */
    --vh-grad-sheen:    linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 60%);

    color-scheme: dark;
  }
}

:root[data-theme="dark"] {
  --vh-bg:             #14161a;
  --vh-bg-elevated:    #1b1e23;
  --vh-bg-muted:       #23272e;
  --vh-border:         #2c3138;
  --vh-border-strong:  #3a4049;
  --vh-text:           #ecedef;
  --vh-text-muted:     #a4a8b0;
  --vh-text-subtle:    #71757d;
  --vh-text-on-brand:  #ffffff;
  --vh-focus:          color-mix(in srgb, var(--vh-green-300) 38%, transparent);
  --vh-primary:        var(--vh-green-300);
  --vh-primary-soft:   #1d2a22;
  --vh-secondary-soft: #2a2418;
  --vh-glass-bg:        rgba(27, 30, 35, 0.62);
  --vh-glass-bg-strong: rgba(27, 30, 35, 0.86);
  --vh-glass-border:    rgba(255, 255, 255, 0.08);
  --vh-glass-blur:      saturate(140%) blur(14px);
  --vh-glass-blur-lg:   saturate(160%) blur(22px);
  --vh-glow-primary:  0 16px 40px -10px color-mix(in srgb, var(--vh-green-400) 60%, transparent),
                      0 2px 8px   -2px color-mix(in srgb, var(--vh-green-400) 30%, transparent);
  --vh-glow-gold:     0 16px 40px -10px color-mix(in srgb, var(--vh-gold-400)  60%, transparent),
                      0 2px 8px   -2px color-mix(in srgb, var(--vh-gold-400)  30%, transparent);
  --vh-glow-teal:     0 16px 40px -10px color-mix(in srgb, var(--vh-teal-300)  60%, transparent),
                      0 2px 8px   -2px color-mix(in srgb, var(--vh-teal-300)  30%, transparent);
  --vh-glow-coral:    0 16px 40px -10px color-mix(in srgb, var(--vh-coral-300) 60%, transparent),
                      0 2px 8px   -2px color-mix(in srgb, var(--vh-coral-300) 30%, transparent);
  --vh-glow-neutral:  0 12px 28px -8px rgba(0, 0, 0, 0.55),
                      0 2px 6px      rgba(0, 0, 0, 0.30);
  --vh-grad-sheen:    linear-gradient(135deg, rgba(255,255,255,0.10) 0%, rgba(255,255,255,0) 60%);
  color-scheme: dark;
}

/* ============================================================
 * Reduced-motion: kill all motion tokens
 * ========================================================== */
@media (prefers-reduced-motion: reduce) {
  :root {
    --vh-dur-fast: 0ms;
    --vh-dur-base: 0ms;
    --vh-dur-slow: 0ms;
    --vh-dur-cinematic: 0ms;
    --vh-dur-cinematic-long: 0ms;
  }
  ::view-transition-old(root),
  ::view-transition-new(root) { animation: none; }
}