/**
 * Design tokens extracted from the live Shopify theme's settings_data.json
 * (Prestige-derived theme, exported 11 Aug 2026).
 *
 * These are the actual values the current storefront renders with, so a rebuild
 * that imports this file starts out visually matching rather than approximating.
 *
 * Fonts are deliberately NOT set to Century Gothic here — see docs/MIGRATION.md
 * ("Fonts are a licensing problem"). Shopify serves Century Gothic under its own
 * Monotype license, which does not transfer to self-hosted infrastructure.
 * --font-heading / --font-body below use a metric-similar geometric fallback
 * stack; swap in the licensed family (or a chosen substitute) once decided.
 */

/*
 * ── NutraV brand palette ────────────────────────────────────────────────
 * Every accent is pulled from the packaging itself, so the site and the
 * physical products read as one brand:
 *
 *   Ink navy   #1d3d5c  headings, prices     (Flubiotic box band)
 *   NutraV blue #0f75bb  actions, links      (logo triangle, buttons)
 *   Botanical green #2e7d32 / #4caf50        (Plantbiotic, Immune Tea)
 *   Hydration aqua  #0e7490 / #35b6d9        (Z-Hydrate)
 *   Seabuck orange  #f0932b decorative only  (sea buckthorn berries)
 *   Coral       #f94c43  sale prices, alerts (Heart Plus heartline)
 *   Star gold   #e8a020  review stars
 *
 * Ratio to keep: ~60% white/neutral surfaces, ~30% blue family, ~10% warm
 * accents. The darker value of each pair is text-safe on white (≥4.5:1);
 * the brighter value is decorative only — borders, icons, fills, never
 * body text.
 */
:root {
  /* Text */
  --color-heading: #1d3d5c;
  --color-text: #5c5c5c;
  --color-text-light: #939393;
  --color-link: #323232;

  /* Brand accents */
  --color-ink: #1d3d5c;
  --color-green: #2e7d32;
  --color-green-bright: #4caf50;
  --color-aqua: #0e7490;
  --color-aqua-bright: #35b6d9;
  --color-orange: #f0932b;
  --color-gold: #e8a020;

  /* Surfaces */
  --color-background: #ffffff;
  --color-background-light: #ffffff;
  /* Section bands — brand accents washed nearly to white, so alternating
     sections read as separate without competing with the photography. */
  --color-band: #f2f7fb;
  --color-band-border: #e2edf5;
  --color-band-mint: #f1f9f2;
  --color-band-mint-border: #ddefdf;
  --color-band-aqua: #edf9fc;
  --color-footer-band: #f7f8f9;

  /* Accents */
  --color-sale: #f94c43;
  --color-error: #e32c2b;

  /* Buttons */
  --color-button-background: #0f75bb;
  --color-button-text: #ffffff;

  /* Header */
  --color-header-background: #ffffff;
  --color-header-heading: #1d3d5c;
  --color-header-light: #939393;

  /* Navigation */
  --color-nav-background: #ffffff;
  --color-nav-text: #5c5c5c;

  /* Footer */
  --color-footer-background: #ffffff;
  --color-footer-heading: #1d3d5c;
  --color-footer-text: #939393;

  /* Secondary blocks (inverted) */
  --color-secondary-background: #5c5c5c;
  --color-secondary-text: #ffffff;

  /* Typography. Shopify: heading century_gothic_n7 (bold), body century_gothic_n4. */
  --font-heading: "Questrial", "Century Gothic", "URW Gothic", "Avant Garde", sans-serif;
  --font-body: "Questrial", "Century Gothic", "URW Gothic", "Avant Garde", sans-serif;
  --font-heading-weight: 700;
  --font-body-weight: 400;
  --font-size-base: 16px;
}

/**
 * Deliberately light-only. The brand's greys were picked against white, and the
 * product imagery — description icons included — is dark artwork on transparent
 * or white backgrounds, so a dark surface makes it disappear. Every surface is
 * painted explicitly; a dark-mode visitor (or a dark artifact viewer) gets the
 * same white storefront rather than an inverted one.
 */
:root {
  color-scheme: light;
}