/* ═══ COLOR FLOW MAP (from design-spec.theme_context_map) ═══
 * index.html:         nav → transparent-on-dark (scrolled: solid dark)
 *   section 1 hero   → DARK  (#080F1A)  | text: #E8F0F8
 *   section 2        → DARK-ALT (#0D1824) | text: #E8F0F8
 *   section 3        → DARK  (#080F1A)  | text: #E8F0F8
 *   section 4        → DARK-ALT (#0D1824) | text: #E8F0F8
 *   section 5        → DARK-ALT (#0D1824) | text: #E8F0F8
 *   section 6        → DARK  (#080F1A)  | text: #E8F0F8
 *   section 7        → DARK-ALT (#0D1824) | text: #E8F0F8
 *   section 8        → DARK  (#080F1A)  | text: #E8F0F8
 *   footer           → DARK  (#080F1A)  | text: #7A9AB8
 *
 * docs/quickstart.html, docs/api-reference.html, docs/supported-hardware.html,
 * docs/migration-guide.html, about.html, team.html, careers.html, status.html,
 * blog/article.html, legal/*.html:
 *   nav  → transparent-on-light (scrolled: solid dark — FORCE SOLID IMMEDIATELY)
 *   hero → LIGHT (#F2F5F8)  | text: #0C1520
 *   footer → DARK (#080F1A) | text: #7A9AB8
 *   NOTE: light-top pages → nav MUST be force-solid dark (not transparent over white)
 *
 * about.html section 4 (about-cta) → dark island nested in light-top page
 * login/* pages: dark-top
 * ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── Brand colours ── */
  --nrm-brand-primary:    #080F1A;
  --nrm-accent-deco:      #00C8B4;
  --nrm-accent-on-dark:   #00C8B4;
  --nrm-accent-on-light:  #007A6E;

  /* ── Background layers ── */
  --nrm-bg-dark:          #080F1A;
  --nrm-bg-dark-alt:      #0D1824;
  --nrm-bg-dark-card:     #111E2E;
  --nrm-bg-light:         #F2F5F8;
  --nrm-bg-light-alt:     #E6EBF2;
  --nrm-bg-white:         #FFFFFF;
  --nrm-bg-code:          #0A1520;

  /* ── Foreground on dark ── */
  --nrm-fg-dark-1:        #E8F0F8;
  --nrm-fg-dark-2:        #7A9AB8;
  --nrm-fg-dark-muted:    #4A6480;

  /* ── Foreground on light ── */
  --nrm-fg-light-1:       #0C1520;
  --nrm-fg-light-2:       #3D5166;

  /* ── Spike/data accent ── */
  --nrm-spike-trace:      #00C8B4;
  --nrm-spike-dim:        #005850;
  --nrm-data-readout:     #5BCBE0;

  /* ── Borders ── */
  --nrm-border-dark:      rgba(255, 255, 255, 0.08);
  --nrm-border-light:     rgba(12, 21, 32, 0.12);

  /* ── Typography ── */
  --nrm-font-mono:        'IBM Plex Mono', 'Cascadia Code', 'Fira Mono', monospace;
  --nrm-font-body:        'Inter', system-ui, -apple-system, sans-serif;

  /* ── Spacing ── */
  --nrm-section-vpad:     clamp(4rem, 8vw, 7rem);
  --nrm-container-max:    1180px;
  --nrm-grid-gap:         2rem;
  --nrm-card-pad:         1.75rem;

  /* ── Radius ── */
  --nrm-radius-sm:        4px;
  --nrm-radius-md:        6px;
  --nrm-radius-lg:        8px;

  /* ── Transitions ── */
  --nrm-trans-fast:       150ms ease;
  --nrm-trans-med:        200ms ease;
}