/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 * index.html:
 *   nav         → transparent-on-dark (scrolled: solid dark #0E1219)   | logo: light
 *   hero        → DARK  (#0E1219)   | text: #F0F4F8 on dark
 *   social-bar  → DARK-ALT (#151C27)| text: fg-on-dark
 *   problem     → DARK  (#0E1219)   | text: fg-on-dark
 *   product-ovw → DARK-ALT (#151C27)| text: fg-on-dark
 *   analytics   → DARK  (#0E1219)   | text: fg-on-dark
 *   stats       → DARK-ALT (#151C27)| text: fg-on-dark
 *   testimonials→ DARK  (#0E1219)   | text: fg-on-dark
 *   integrations→ DARK-ALT (#151C27)| text: fg-on-dark
 *   cta-final   → BRAND (amber band)| text: dark charcoal on amber
 *   footer      → DARK  (#0E1219)   | text: fg-on-dark
 *
 * pricing.html:
 *   nav         → transparent-on-light (scrolled: solid dark) — FORCE SOLID DARK (light-top)
 *   hero        → LIGHT (#F1F5F9)   | text: #0E1219 on light
 *   tiers       → WHITE (#FFFFFF)   | text: fg-on-light
 *   faq         → LIGHT (#F1F5F9)   | text: fg-on-light
 *   cta-dark    → DARK  (#0E1219)   | text: fg-on-dark
 *
 * blog/article.html, contact.html, login/reset, status.html, legal/*:
 *   nav         → FORCE SOLID DARK (light-top) | logo: dark
 *   first section → LIGHT or WHITE   | text: fg-on-light
 *
 * Nav invariant: dark nav bg → logo-light.svg; light-top forced-dark nav → same logo-light.svg
 *   because nav is always dark regardless of page theme
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* --- Core palette --- */
  --pvnt-dark:        #0E1219;
  --pvnt-dark-alt:    #151C27;
  --pvnt-mid:         #1E2A38;
  --pvnt-amber:       #F59E0B;
  --pvnt-amber-hover: #D97706;
  --pvnt-amber-aa:    #FBBF24;   /* AA on dark */
  --pvnt-amber-lt:    #B45309;   /* AA on light */
  --pvnt-teal:        #06B6D4;
  --pvnt-teal-aa:     #22D3EE;   /* AA on dark */
  --pvnt-teal-lt:     #0E7490;   /* AA on light */

  /* --- Foreground tokens --- */
  --pvnt-fg-dark-1:   #F0F4F8;   /* ~16:1 on dark */
  --pvnt-fg-dark-2:   #94A3B8;   /* ~7.2:1 on dark */
  --pvnt-fg-dark-3:   #64748B;   /* decorative only */
  --pvnt-fg-light-1:  #0E1219;   /* ~17:1 on light */
  --pvnt-fg-light-2:  #334155;   /* ~8.4:1 on light */
  --pvnt-fg-light-3:  #64748B;   /* ~4.6:1 on light */

  /* --- Background tokens --- */
  --pvnt-bg-dark:     #0E1219;
  --pvnt-bg-dark-alt: #151C27;
  --pvnt-bg-mid:      #1E2A38;
  --pvnt-bg-light:    #F1F5F9;
  --pvnt-bg-white:    #FFFFFF;
  --pvnt-bg-cream:    #F8F5F0;

  /* --- Border tokens --- */
  --pvnt-border-dark: #2A3547;
  --pvnt-border-light:#E2E8F0;

  /* --- Typography --- */
  --pvnt-font-sans:   'Inter', system-ui, -apple-system, sans-serif;
  --pvnt-font-mono:   'JetBrains Mono', 'Fira Code', Consolas, 'Courier New', monospace;

  /* --- Spacing --- */
  --pvnt-section-v:   clamp(4rem, 8vw, 8rem);
  --pvnt-container:   1200px;
  --pvnt-pad:         clamp(1rem, 4vw, 2rem);
  --pvnt-gap:         1.5rem;
  --pvnt-card-pad:    1.75rem 2rem;

  /* --- Motion --- */
  --pvnt-ease:        cubic-bezier(0.4, 0, 0.2, 1);
  --pvnt-dur-fast:    0.15s;
  --pvnt-dur-base:    0.2s;
  --pvnt-dur-slow:    0.35s;

  /* --- Radius --- */
  --pvnt-r-sm:  6px;
  --pvnt-r-md:  10px;
  --pvnt-r-lg:  16px;
  --pvnt-r-xl:  24px;

  /* --- Nav height --- */
  --pvnt-nav-h: 68px;
}