:root {
  /* Brand palette — NutriVital: white/off-white paper base so the product
     photography carries the color, with the logo's navy doing the ink work
     and a teal accent — chosen as a cool analogous partner to that navy
     (green sat opposite it on the wheel and fought it; teal sits right next
     to blue and reads as one family).

     --color-accent for fills (badges, primary buttons), --color-accent-ink
     for text/icons sitting ON those teal fills (white — teal is dark
     enough for that), and --color-accent-dark (deep teal, 5:1+ on white)
     for text/icons that carry the accent role while sitting on the page
     itself. */
  /* ink-faint and success are darker than the usual light-theme picks on
     purpose: both carry 10-13px labels (category eyebrows, "2 productos",
     "Envío nacional"), and the lighter values landed at ~3.5:1 on paper —
     under AA for text that small. */
  --color-bg: #FAFAF8;
  --color-surface: #FFFFFF;
  --color-surface-2: #F1F1EE;
  --color-ink: #10233F;
  --color-ink-soft: #3E5164;
  --color-ink-faint: #566475;
  --color-border: #E2E6E3;
  --color-accent: #0F7C82;
  --color-accent-ink: #FFFFFF;
  --color-accent-dark: #0B5C61;
  --color-accent-soft: #E1F1F1;
  --color-secondary: #4FB6BC;
  --color-secondary-ink: #072B2E;
  --color-success: #157A38;
  --color-danger: #D62B31;
  --color-danger-soft: #FDECEC;
  --color-overlay: rgba(16, 35, 63, 0.45);

  /* Reserved exclusively for the purchase action (WhatsApp) — never decorative */
  --color-cta: #25D366;
  --color-cta-dark: #1DA851;
  --color-cta-soft: #E7F9EE;

  --font-display: 'Rajdhani', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body: 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-script: 'Rajdhani', 'Manrope', sans-serif;

  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 10px;
  --radius-pill: 999px;

  /* Shadows carry the elevation now that there is no dark ground to separate
     surfaces — deeper and warmer than the dark theme's near-invisible ones. */
  --shadow-sm: 0 1px 2px rgba(23, 23, 26, 0.06);
  --shadow-md: 0 2px 10px rgba(23, 23, 26, 0.08);
  --shadow-lg: 0 10px 34px rgba(23, 23, 26, 0.12);
  --shadow-float: 0 6px 18px rgba(37, 211, 102, 0.32);

  --header-h: 60px;
  --navbar-h: 64px;
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);

  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 160ms;
  --dur-med: 280ms;
  --dur-slow: 420ms;

  --container: 560px;
  --container-wide: 560px;
}

@media (min-width: 900px) {
  :root {
    --container-wide: 1360px;
    --header-h: 72px;
  }
}

/* NutriVital ships light-only by design (matches the brand's white/green
   identity), so no separate light/dark toggle logic is defined here. */