/* NEXUS Design System v2 — canonical tokens */

:root {
  color-scheme: dark;

  /* Core palette */
  --nx-void: #000000;
  --nx-ground: #141312;
  --nx-smoke: #c4bbb3;
  --nx-mist: #8a7f78;
  --nx-chrome: #b5aca4;
  --nx-chrome-hi: #e8e2dc;
  --nx-infrared: #ff4c00;
  --nx-signal: var(--nx-infrared);
  --nx-ice: #52b8ff;
  --nx-vanilla: #f2ebe0;
  --nx-icon-color: var(--nx-vanilla);
  --nx-slate: #4c596b;
  --nx-dust: #354656;
  --nx-dust-hi: #4a5f75;
  --nx-dust-border: #5a7089;
  --nx-dust-text: #a3b8cc;
  --nx-phosphor: #1e4a38;
  --nx-phosphor-hi: #00c98a;
  --nx-signal-deep: #351808;
  --nx-bog: #1a3d32;

  /* Semantic */
  --nx-text-primary: var(--nx-smoke);
  --nx-text-secondary: var(--nx-mist);
  --nx-text-muted: rgba(196, 187, 179, 0.55);
  --nx-text-inverse: #0a0a0a;
  --nx-accent: var(--nx-infrared);
  --nx-accent-cool: var(--nx-ice);
  --nx-matrix: #00c98a;
  --nx-link: #52b8ff;
  --nx-link-hover: #9ad8ff;
  --nx-signal-text: #000000;
  --nx-focus: var(--nx-signal);
  --nx-error: #ff4c00;
  --nx-success: var(--nx-matrix);
  --nx-secondary: var(--nx-dust);
  --nx-secondary-bg: rgba(53, 70, 86, 0.35);
  --nx-secondary-border: var(--nx-slate);
  --nx-secondary-text: var(--nx-dust-text);
  --nx-secondary-text-hover: var(--nx-smoke);

  /* Tags — three categories only: draft · premier · signal */
  --nx-tag-draft-bg: var(--nx-ground);
  --nx-tag-draft-text: var(--nx-text-secondary);
  --nx-tag-draft-border: var(--nx-border);
  --nx-tag-premier-bg: var(--nx-phosphor);
  --nx-tag-premier-text: var(--nx-phosphor-hi);
  --nx-tag-signal-bg: var(--nx-signal-deep);
  --nx-tag-signal-text: var(--nx-signal);

  /* Surfaces */
  --nx-surface-page: var(--nx-void);
  --nx-surface-raised: var(--nx-ground);
  --nx-surface-panel: rgba(20, 19, 18, 0.72);
  --nx-surface-table: var(--nx-surface-raised);
  --nx-surface-snippet-bar: rgba(0, 0, 0, 0.22);
  --nx-surface-code: var(--nx-ground);
  --nx-code-fg: var(--nx-matrix);
  --nx-surface-hover: rgba(168, 216, 255, 0.06);
  --nx-smoke-surface: #c4bbb3;
  --nx-surface-overlay: rgba(0, 0, 0, 0.92);
  --nx-surface-bar: rgba(0, 0, 0, 0.78);
  --nx-border: rgba(255, 255, 255, 0.08);
  --nx-border-strong: rgba(255, 255, 255, 0.16);
  --nx-border-accent: rgba(168, 216, 255, 0.35);

  /* Theme toggle */
  --nx-toggle-bg: #141312;
  --nx-toggle-border: rgba(255, 255, 255, 0.16);
  --nx-toggle-idle: #8a7f78;
  --nx-toggle-active: #c4bbb3;
  --nx-toggle-divider: rgba(255, 255, 255, 0.08);
  --nx-footer-scrim: linear-gradient(to top, rgba(0, 0, 0, 0.6), transparent);

  /* Typography */
  --nx-font-display: "Syne", system-ui, sans-serif;
  --nx-font-body: "Instrument Sans", system-ui, sans-serif;
  --nx-font-mono: "IBM Plex Mono", ui-monospace, monospace;

  /* Type scale */
  --nx-text-display: clamp(2rem, 5vw, 3.25rem);
  --nx-text-h1: clamp(1.75rem, 4vw, 2.5rem);
  --nx-text-h2: clamp(1.35rem, 3vw, 1.85rem);
  --nx-text-h3: 1.05rem;
  --nx-text-body: 0.95rem;
  --nx-text-small: 0.82rem;
  --nx-text-caption: 0.68rem;
  --nx-text-stamp: 0.58rem;

  /* Spacing */
  --nx-space-1: 0.25rem;
  --nx-space-2: 0.5rem;
  --nx-space-3: 0.75rem;
  --nx-space-4: 1rem;
  --nx-space-5: 1.5rem;
  --nx-space-6: 2rem;
  --nx-space-8: 3rem;
  --nx-pad: clamp(1.25rem, 4vw, 2.5rem);
  --nx-bar-h: 56px;
  --nx-touch: 44px;

  /* Motion */
  --nx-ease: cubic-bezier(0.22, 1, 0.36, 1);
  --nx-duration-fast: 150ms;
  --nx-duration: 250ms;
  --nx-duration-slow: 450ms;

  /* Radius — minimal; brand is sharp */
  --nx-radius: 0;
  --nx-radius-pill: 999px;

  /* Shadows */
  --nx-shadow-cta: 0 6px 28px rgba(168, 216, 255, 0.14);
  --nx-shadow-ir: 0 4px 20px rgba(255, 76, 0, 0.12);
  --nx-shadow-elevated: 0 12px 48px rgba(0, 0, 0, 0.35);

  /* Z */
  --nx-z-bar: 500;
  --nx-z-modal: 600;

  /* Chrome type aliases (dark theme = canvas) */
  --nx-chrome-smoke: var(--nx-smoke);
  --nx-chrome-mist: var(--nx-mist);
  --nx-chrome-muted: var(--nx-text-muted);
  --nx-chrome-matrix: var(--nx-matrix);
  --nx-chrome-link: var(--nx-link);
}

[data-theme="light"] {
  color-scheme: light;

  /*
   * Light mode — warm chrome-hi canvas + solid smoke steps.
   * Hierarchy mirrors dark (void → ground) with legible contrast.
   */
  --nx-void: #e8e2dc;
  --nx-ground: #faf8f5;
  --nx-smoke: #1c1916;
  --nx-mist: #4a433c;
  --nx-chrome: #6b635c;
  --nx-chrome-hi: #ffffff;
  --nx-text-primary: #1c1916;
  --nx-text-secondary: #4a433c;
  --nx-text-muted: #6b635c;
  --nx-text-inverse: #faf8f5;
  --nx-smoke-surface: #d9d2ca;

  /* Accents — same hex as dark */
  --nx-infrared: #ff4c00;
  --nx-signal: #ff4c00;
  --nx-ice: #52b8ff;
  --nx-vanilla: #9a8e80;
  --nx-icon-color: var(--nx-vanilla);
  --nx-slate: #4c596b;
  --nx-dust: #354656;
  --nx-dust-hi: #4a5f75;
  --nx-dust-border: #5a7089;
  --nx-dust-text: #a3b8cc;
  --nx-phosphor: #1e4a38;
  --nx-phosphor-hi: #00c98a;
  --nx-signal-deep: #351808;
  --nx-bog: #1a3d32;
  --nx-focus: var(--nx-signal);
  --nx-signal-text: #000000;
  /* Secondary — slate outline + dust label; dust fill on hover */
  --nx-secondary-bg: transparent;
  --nx-secondary-border: var(--nx-slate);
  --nx-secondary-text: var(--nx-dust);
  --nx-secondary-text-hover: var(--nx-dust-text);
  --nx-secondary: var(--nx-dust);

  /* Surfaces — solid steps (no muddy translucency) */
  --nx-surface-page: #e8e2dc;
  --nx-surface-raised: #faf8f5;
  --nx-surface-panel: #f5f2ec;
  --nx-surface-table: #faf8f5;
  --nx-surface-snippet-bar: #ebe6df;
  --nx-surface-code: #f0ebe4;
  --nx-surface-hover: rgba(82, 184, 255, 0.14);
  --nx-surface-overlay: rgba(250, 248, 245, 0.98);
  --nx-surface-bar: rgba(250, 248, 245, 0.94);
  --nx-border: rgba(28, 25, 22, 0.16);
  --nx-border-strong: rgba(28, 25, 22, 0.26);
  --nx-border-accent: rgba(82, 184, 255, 0.5);
  --nx-shadow-cta: 0 6px 28px rgba(82, 184, 255, 0.18);
  --nx-shadow-ir: 0 4px 20px rgba(255, 76, 0, 0.15);
  --nx-shadow-elevated: 0 8px 28px rgba(28, 25, 22, 0.1);
  --nx-code-fg: #007a52;

  /* Theme toggle */
  --nx-toggle-bg: #f0ebe4;
  --nx-toggle-border: rgba(28, 25, 22, 0.18);
  --nx-toggle-idle: #6b635c;
  --nx-toggle-active: #1c1916;
  --nx-toggle-divider: rgba(28, 25, 22, 0.14);
  --nx-footer-scrim: linear-gradient(to top, rgba(232, 226, 220, 0.95), transparent);

  /* Tags — solid smoke fills */
  --nx-tag-draft-bg: #d9d2ca;
  --nx-tag-draft-text: #3a3530;
  --nx-tag-draft-border: rgba(28, 25, 22, 0.18);
  --nx-tag-premier-bg: rgba(30, 74, 56, 0.12);
  --nx-tag-premier-text: #006b4a;
  --nx-tag-signal-bg: rgba(255, 76, 0, 0.12);
  --nx-tag-signal-text: #c43d00;

  /* Chrome aliases mirror canvas in light */
  --nx-chrome-smoke: var(--nx-text-primary);
  --nx-chrome-mist: var(--nx-text-secondary);
  --nx-chrome-muted: var(--nx-text-muted);
  --nx-chrome-matrix: var(--nx-matrix);
  --nx-chrome-link: var(--nx-link);
}

html[data-icon-color="ice"] {
  --nx-icon-color: var(--nx-ice);
}

html[data-icon-color="vanilla"] {
  --nx-icon-color: var(--nx-vanilla);
}