/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 * index.html:
 *   nav        → transparent-on-dark (scrolled: solid #1A2744) | text: white
 *   hero       → DARK  (#1A2744)   | text: white
 *   problem-bar→ DARK-ALT (#243156) | text: white, amber stats
 *   solution-overview → LIGHT (#F5F7FA) | text: dark
 *   product-preview   → WHITE (#FFFFFF)  | text: dark
 *   how-it-works-teaser → LIGHT          | text: dark
 *   social-proof      → DARK (#1A2744)   | text: white
 *   solutions-teaser  → LIGHT            | text: dark
 *   cta-band          → DARK (#1A2744)   | text: white
 *   footer            → DARK (#1A2744)   | text: white-muted
 *
 * login pages (light-top):
 *   nav        → transparent-on-light (scrolled: solid white) | text: dark
 *   body       → LIGHT (#F5F7FA)
 *   auth-panel → WHITE (nested)   | text: dark
 *   auth-side  → DARK (nested)    | text: white
 *
 * legal pages (dark-top):
 *   legal-header → DARK  | text: white
 *   legal-content→ WHITE | text: dark
 *
 * NOTE: dark→dark-alt adjacent (hero + problem-bar) — amber dividers as separator
 * NOTE: dark→dark adjacent (video-cta + cta-band on how-it-works) — subtle border separator
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --cfq-brand-primary:       #1A2744;
  --cfq-accent-decorative:   #F59E0B;
  --cfq-accent-aa-light:     #B45309;
  --cfq-accent-aa-dark:      #FBBF24;

  /* Foreground tokens */
  --cfq-fg-light-primary:    #1A2744;
  --cfq-fg-light-secondary:  #4B5E7E;
  --cfq-fg-dark-primary:     #F0F4F8;
  --cfq-fg-dark-secondary:   #94A8C4;

  /* Background tokens */
  --cfq-bg-light:            #F5F7FA;
  --cfq-bg-white:            #FFFFFF;
  --cfq-bg-dark:             #1A2744;
  --cfq-bg-dark-alt:         #243156;
  --cfq-bg-amber-tint:       #FFFBEB;

  /* Border */
  --cfq-border-light:        #DDE3EF;
  --cfq-border-dark:         rgba(255,255,255,0.12);

  /* Success */
  --cfq-success:             #10B981;

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

  /* Type scale */
  --cfq-display:   clamp(2.5rem, 5vw, 4rem);
  --cfq-h1:        clamp(2rem, 4vw, 3rem);
  --cfq-h2:        clamp(1.5rem, 3vw, 2.25rem);
  --cfq-h3:        clamp(1.25rem, 2.5vw, 1.75rem);
  --cfq-body-lg:   1.125rem;
  --cfq-body:      1rem;
  --cfq-small:     0.875rem;
  --cfq-label-size: 0.75rem;

  /* Spacing */
  --cfq-section-v:        clamp(4rem, 8vw, 7rem);
  --cfq-container-max:    1200px;
  --cfq-container-pad:    clamp(1.25rem, 4vw, 2rem);

  /* Shape */
  --cfq-radius-card:   0.75rem;
  --cfq-radius-btn:    0.5rem;
  --cfq-radius-badge:  9999px;

  /* Shadows */
  --cfq-shadow-card:       0 1px 3px rgba(26,39,68,0.08), 0 4px 16px rgba(26,39,68,0.06);
  --cfq-shadow-hover:      0 4px 12px rgba(26,39,68,0.12), 0 12px 32px rgba(26,39,68,0.10);
  --cfq-shadow-dashboard:  0 8px 40px rgba(26,39,68,0.18);

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