/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 *
 * index.html (dark-top):
 *   nav        → transparent-on-dark (scroll>40: solid #0A1628) | logo: light | links: white
 *   hero       → DARK   (#0A1628)      | text: #EEF2F7
 *   social-bar → DARK_ALT (#101F3A)   | text: #EEF2F7
 *   problem    → DARK   (#0A1628)      | text: #EEF2F7
 *   solution   → LIGHT  (#F2F6FA)      | text: #0A1628
 *   product-prev → LIGHT_ALT (#E8EFF6)| text: #0A1628
 *   use-cases  → DARK   (#0A1628)      | text: #EEF2F7
 *   testimonials → DARK_ALT (#101F3A) | text: #EEF2F7
 *   cta-band   → BRAND  (teal→dark)    | text: white
 *   footer     → DARK   (#0A1628)      | text: #8CA3C2 / #EEF2F7
 *
 * product.html / how-it-works.html / use-cases/* / customers.html / about.html / contact.html (dark-top):
 *   nav  → same transparent→solid pattern
 *   hero → DARK
 *   mid  → LIGHT / LIGHT_ALT
 *   cta  → DARK
 *
 * pricing.html / blog/* / legal/* (light-top):
 *   nav  → transparent-on-light (scroll>40: solid white) | logo: dark | links: dark
 *   hero → LIGHT (#F2F6FA)
 *   body → WHITE (#FFFFFF)
 *   cta  → DARK (pricing has a dark cta at bottom)
 *
 * login/* (dark-top body-class, but main section = light split with dark aside):
 *   nav  → transparent → solid #0A1628 | logo: light
 *   auth-side → DARK
 *   auth-panel → WHITE
 *
 * NOTE: Adjacent dark→dark needs subtle border/shade separator.
 * NOTE: Nav link color default = white (dark-top); overridden to #0A1628 on light-top pages.
 * ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --dja-brand-primary: #0A1628;
  --dja-brand-surface: #101F3A;
  --dja-accent: #00D4B4;
  --dja-accent-aa-light: #007A68;
  --dja-accent-aa-dark: #00D4B4;

  /* Foreground tokens */
  --dja-fg-dark-primary: #EEF2F7;
  --dja-fg-dark-secondary: #8CA3C2;
  --dja-fg-light-primary: #0A1628;
  --dja-fg-light-secondary: #4A5C72;

  /* Background tokens */
  --dja-bg-dark: #0A1628;
  --dja-bg-dark-alt: #101F3A;
  --dja-bg-dark-card: #162847;
  --dja-bg-light: #F2F6FA;
  --dja-bg-light-alt: #E8EFF6;
  --dja-bg-white: #FFFFFF;

  /* Border tokens */
  --dja-border-dark: #1E3558;
  --dja-border-light: #D3DEEB;

  /* Status tokens */
  --dja-warn: #F5A623;
  --dja-success: #2AC78B;
  --dja-risk: #E85C4A;

  /* Typography */
  --dja-font-display: 'DM Sans', system-ui, sans-serif;
  --dja-font-body: 'Inter', system-ui, sans-serif;
  --dja-font-mono: 'JetBrains Mono', 'Fira Code', 'Consolas', monospace;

  /* Type scale */
  --dja-h1: clamp(2.4rem, 5vw, 3.8rem);
  --dja-h2: clamp(1.8rem, 3vw, 2.6rem);
  --dja-h3: 1.25rem;
  --dja-body-lg: 1.125rem;
  --dja-body: 1rem;
  --dja-caption: 0.875rem;

  /* Spacing */
  --dja-space-xs: 8px;
  --dja-space-sm: 16px;
  --dja-space-md: 24px;
  --dja-space-lg: 40px;
  --dja-space-xl: 64px;
  --dja-space-2xl: 96px;
  --dja-space-3xl: 120px;
  --dja-section-pad-desktop: 96px;
  --dja-section-pad-mobile: 64px;

  /* Border radius */
  --dja-radius-card: 8px;
  --dja-radius-input: 6px;
  --dja-radius-tag: 4px;
  --dja-radius-pill: 24px;

  /* Shadows */
  --dja-shadow-sm: 0 2px 8px rgba(10,22,40,0.12);
  --dja-shadow-card: 0 4px 16px rgba(10,22,40,0.16);
  --dja-shadow-hover: 0 8px 32px rgba(10,22,40,0.22);

  /* Nav */
  --dja-nav-height: 72px;
}