/* NumberAlive design tokens, locked 2026-10-28. Dark (Ink) is the default and light (Paper) follows the device. The signed-in pages stamp data-theme on <html> (light, dark or system). .na-site pins the marketing pages to dark and .na-side the dashboard sidebar. Mint is the one accent on both themes, with ink text on top. */
:root,
.na-site,
.na-side {
  --na-font: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --na-font-display: 'Space Grotesk', 'Instrument Sans', system-ui, sans-serif;
  --na-font-mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  --na-bg: #0B1220;
  --na-surface: #121B2D;
  --na-line: #243047;
  --na-line-strong: #3A465A;

  --na-text: #F4F6F8;
  --na-muted: #B6C0CC;
  --na-subtle: #8795A8;

  --na-mint: #19E0A0;
  --na-accent: #19E0A0;
  --na-accent-ink: #19E0A0;
  --na-on-accent: #0B1220;
  --na-word-alive: #19E0A0;

  --na-success: #19E0A0;
  --na-danger: #FF8A7A;
  --na-warn: #FFC857;

  --na-radius-control: 10px;
  --na-radius-card: 18px;

  --na-space-1: 4px;
  --na-space-2: 8px;
  --na-space-3: 12px;
  --na-space-4: 16px;
  --na-space-5: 24px;
  --na-space-7: 48px;

  color-scheme: dark;
}

/* The light values are written twice, once for the device and once for an explicit choice: resolving "system" in JS would paint dark first and flash. Keep the two blocks identical. */
@media (prefers-color-scheme: light) {
  :root:not([data-theme='dark']) {
    --na-bg: #F4F6F8;
    --na-surface: #FFFFFF;
    --na-line: #D5DBE2;
    --na-line-strong: #B7C0CB;

    --na-text: #0B1220;
    --na-muted: #2F3A48;
    --na-subtle: #4F5B6A;

    --na-accent-ink: #0A7F5C;
    --na-word-alive: #08936A;

    --na-success: #0A7F5C;
    --na-danger: #B42318;
    --na-warn: #8A5A00;

    color-scheme: light;
  }
}

:root[data-theme='light'] {
  --na-bg: #F4F6F8;
  --na-surface: #FFFFFF;
  --na-line: #D5DBE2;
  --na-line-strong: #B7C0CB;

  --na-text: #0B1220;
  --na-muted: #2F3A48;
  --na-subtle: #4F5B6A;

  --na-accent-ink: #0A7F5C;
  --na-word-alive: #08936A;

  --na-success: #0A7F5C;
  --na-danger: #B42318;
  --na-warn: #8A5A00;

  color-scheme: light;
}