/* ================================================================
   NM-TOKENS.CSS — Nothing Design System tokens
   Scoped to body.nm-page to avoid collisions with legacy CSS.
   ================================================================ */

body.nm-page {
  /* Graphite palette */
  --black: #0A0B0D;
  --surface: #111316;
  --surface-raised: #181A1E;
  --surface-high: #1E2126;
  --border: #232830;
  --border-visible: #2E3540;

  /* Text */
  --text-disabled: #4A5568;
  --text-secondary: #8890A0;
  --text-primary: #DCE4F0;
  --text-display: #F0F4FF;

  /* Accent & status */
  --accent: #D71921;
  --accent-subtle: rgba(215, 25, 33, 0.12);
  --success: #4A9E5C;
  --warning: #D4A843;
  --interactive: #5B9BF6;

  /* Spacing */
  --space-2xs: 2px;
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Typography */
  --font-ui: "Space Grotesk", system-ui, sans-serif;
  --font-display: var(--font-ui);
  --font-data: "Space Mono", "JetBrains Mono", monospace;

  /* Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Motion */
  --ease-out: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ── Legacy token bridges ──────────────────────────────────────
     Maps old token names → graphite palette.
     Allows legacy component CSS to automatically adopt new colors
     on any page that has class="nm-page", without rewriting CSS.
     ─────────────────────────────────────────────────────────────*/
  --body-bg: radial-gradient(circle at top, #222b33 0, #151B20 45%, #06080a 100%);
  --bg: var(--surface);
  --bg-soft: var(--surface-raised);
  --bg-card: var(--surface-raised);
  --bg-elevated: var(--surface-high);
  --bg-header: rgba(10, 11, 13, 0.88);
  --table-group-bg: var(--black);

  --text: var(--text-primary);
  --text-contrast: var(--text-display);
  --text-dim-strong: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-soft: var(--text-secondary);
  --text-strong: var(--text-display);

  --border-subtle: var(--border);
  --border-strong: var(--border-visible);
  --border-header: var(--border);

  --brand-red: var(--accent);
  --brand-red-700: #b81218;
  --accent-danger: var(--accent);
  --accent-success: var(--success);

  --radius-xs: var(--radius-sm);
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;

  --shadow-xs: none;
  --shadow-sm: none;
  --shadow-soft: none;
  --shadow-subtle: none;

  --font-family-base: var(--font-ui);
}

/* ── Light mode token overrides ───────────────────────────────────── */
body.theme-light.nm-page {
  --surface: #f8fafc;
  --surface-raised: #ffffff;
  --surface-high: #f1f5f9;
  --border: rgba(148, 163, 184, 0.25);
  --border-visible: rgba(148, 163, 184, 0.45);

  --text-disabled: #94a3b8;
  --text-secondary: #64748b;
  --text-primary: #1e293b;
  --text-display: #0f172a;

  --body-bg: #f3f4f6;
  --bg: var(--surface);
  --bg-soft: var(--surface-raised);
  --bg-card: var(--surface-raised);
  --bg-elevated: var(--surface-high);
  --bg-header: #f6f6f6;
  --table-group-bg: #f1f5f9;

  --text: var(--text-primary);
  --text-contrast: var(--text-display);
  --text-dim-strong: var(--text-primary);
  --text-muted: var(--text-secondary);
  --text-soft: var(--text-secondary);
  --text-strong: var(--text-display);

  --border-subtle: var(--border);
  --border-strong: var(--border-visible);
}

/* Base reset & body defaults for nm-page */
body.nm-page {
  background: var(--body-bg, var(--black));
  color: var(--text-primary);
  font-family: var(--font-ui);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

body.nm-page *,
body.nm-page *::before,
body.nm-page *::after {
  box-sizing: border-box;
}