/* ═══ COLOR FLOW MAP (from design-spec.sections[].bg_context) ═══
 *
 * index.html:
 *   nav        → solid-dark (#0B1E3E) — solid_top_with_border variant, always dark
 *   hero       → DARK  (#0B1E3E)  | text: fg_on_dark_primary (#EEF2FF)
 *   metrics    → DARK-ALT (#0F2649) | text: fg_on_dark_primary
 *   problem    → DARK  (#0B1E3E)  | text: fg_on_dark_primary
 *   platform   → LIGHT (#F5F7FA)  | text: fg_on_light_primary (#0B1E3E)
 *   fp-section → RULE-STRIPE (#EBF0F7) | text: fg_on_light_primary
 *   proc-nodes → DARK  (#0B1E3E)  | text: fg_on_dark_primary
 *   testimonial→ LIGHT (#F5F7FA)  | text: fg_on_light_primary
 *   resources  → LIGHT (#F5F7FA)  | text: fg_on_light_primary
 *   cta-band   → DARK-DEEP (#060F20) | text: fg_on_dark_primary
 *   footer     → DARK  (#0B1E3E)  | text: fg_on_dark_secondary (#A8B8CF)
 *
 * light-top pages (solutions/*, resources/*, blog/*, team, legal/*, technology/false-positive*):
 *   nav        → solid-dark (#0B1E3E) — design-spec: solid_top_with_border always dark
 *   hero       → LIGHT (#F5F7FA)  | text: fg_on_light_primary
 *   content    → WHITE (#FFFFFF) / LIGHT | text: fg_on_light_primary
 *   footer     → DARK  (#0B1E3E)  | text: fg_on_dark_secondary
 *
 * dark-top pages (platform/*, technology/index, about, contact, index):
 *   nav        → solid-dark (#0B1E3E)
 *   hero       → DARK  (#0B1E3E)  | text: fg_on_dark_primary
 *   footer     → DARK  (#0B1E3E)  | text: fg_on_dark_secondary
 *
 * NAV DECISION: design-spec.layout.nav.variant = "solid_top_with_border"
 *   This means nav is ALWAYS solid dark — no transparent variant needed.
 *   Nav links are ALWAYS white (#EEF2FF) regardless of page theme.
 *   contact.html has nested .lpi-contact-form-panel with bg_context=white —
 *   text inside that panel uses fg_on_light tokens.
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  /* Brand palette */
  --lpi-brand-primary: #0B1E3E;
  --lpi-brand-deep: #060F20;
  --lpi-accent-decorative: #5B3FE4;
  --lpi-accent-aa-on-light: #3D22C8;
  --lpi-accent-aa-on-dark: #8B74FF;
  --lpi-accent-data: #00C8D4;

  /* Foreground tokens — direction: ON what background */
  --lpi-fg-on-light-primary: #0B1E3E;      /* ratio ~14:1 vs #F5F7FA */
  --lpi-fg-on-light-secondary: #3A4A5E;    /* ratio ~8.5:1 vs #F5F7FA */
  --lpi-fg-on-light-muted: #5E6E83;        /* ratio ~5.3:1 vs #F5F7FA — AA large */
  --lpi-fg-on-dark-primary: #EEF2FF;       /* ratio ~13:1 vs #0B1E3E */
  --lpi-fg-on-dark-secondary: #A8B8CF;     /* ratio ~6.8:1 vs #0B1E3E */
  --lpi-fg-on-dark-muted: #6B7E96;         /* ratio ~4.5:1 vs #0B1E3E — AA large */

  /* Backgrounds */
  --lpi-bg-light: #F5F7FA;
  --lpi-bg-white: #FFFFFF;
  --lpi-bg-dark: #0B1E3E;
  --lpi-bg-dark-alt: #0F2649;
  --lpi-bg-dark-deep: #060F20;
  --lpi-bg-rule-stripe: #EBF0F7;

  /* Typography */
  --lpi-font-heading: 'IBM Plex Sans', system-ui, sans-serif;
  --lpi-font-body: 'IBM Plex Sans', system-ui, sans-serif;
  --lpi-font-mono: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace;

  /* Type scale */
  --lpi-h1: clamp(2rem, 4vw, 3rem);
  --lpi-h2: clamp(1.6rem, 3vw, 2.1rem);
  --lpi-h3: 1.4rem;
  --lpi-h4: 1.1rem;
  --lpi-body: 1rem;
  --lpi-caption: 0.875rem;
  --lpi-eyebrow: 0.75rem;
  --lpi-metric: clamp(2rem, 3vw, 2.5rem);

  /* Spacing */
  --lpi-section-pad: 96px;
  --lpi-section-pad-mobile: 64px;
  --lpi-container-max: 1200px;
  --lpi-gutter: 24px;

  /* Radius */
  --lpi-radius-sm: 4px;
  --lpi-radius-md: 8px;
  --lpi-radius-lg: 12px;

  /* Nav */
  --lpi-nav-height: 68px;
  --lpi-nav-bg: #0B1E3E;
  --lpi-nav-border: rgba(139, 116, 255, 0.18);

  /* Transition */
  --lpi-transition: 200ms ease;
}