:root {
  color-scheme: dark;

  /* ── Quantum Black — foundation ── */
  --color-bg-base: #070708;
  --color-bg-elevated: #0e0f11;
  --color-bg-surface: #141518;
  --color-bg-overlay: #1a1b1f;

  /* ── Foreground hierarchy ── */
  --color-fg-primary: #f2f3f5;
  --color-fg-secondary: #a8acb8;
  --color-fg-muted: #6b7080;
  --color-fg-faint: #454852;

  /* ── Brand accent — Quantum Signal ── */
  --color-accent: #00e5a0;
  --color-accent-hover: #33ebb3;
  --color-accent-pressed: #00c288;
  --color-accent-subtle: rgba(0, 229, 160, 0.12);
  --color-accent-glow: rgba(0, 229, 160, 0.35);

  /* ── Border ── */
  --color-border-default: rgba(255, 255, 255, 0.08);
  --color-border-strong: rgba(255, 255, 255, 0.14);
  --color-border-accent: rgba(0, 229, 160, 0.4);

  /* ── Semantic ── */
  --color-success: #34d399;
  --color-success-subtle: rgba(52, 211, 153, 0.12);
  --color-warning: #fbbf24;
  --color-warning-subtle: rgba(251, 191, 36, 0.12);
  --color-error: #f87171;
  --color-error-subtle: rgba(248, 113, 113, 0.12);
  --color-info: #60a5fa;
  --color-info-subtle: rgba(96, 165, 250, 0.12);

  /* ── Typography ── */
  --font-display: "Syne", "Helvetica Neue", sans-serif;
  --font-body: "Geist", "SF Pro Text", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", monospace;

  --text-display-lg: clamp(36px, 4vw, 56px);
  --text-heading-md: 24px;
  --text-heading-sm: 18px;
  --text-body-lg: 16px;
  --text-body-md: 14px;
  --text-body-sm: 13px;
  --text-label: 11px;
  --text-mono-sm: 12px;

  /* ── Spacing (4px grid) ── */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;

  /* ── Radius ── */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 12px;
  --radius-full: 9999px;

  /* ── Depth & motion ── */
  --elevation-shadow: none;
  --duration-fast: 150ms;
  --duration-normal: 220ms;
  --ease-out: cubic-bezier(0.25, 1, 0.5, 1);

  /* ── Z-index ── */
  --z-base: 0;
  --z-elevated: 10;
  --z-header: 100;
  --z-dropdown: 200;
  --z-modal: 300;
  --z-toast: 400;

  /* ── Admin breakpoints (reference tokens) ── */
  --bp-admin-xs: 600px;
  --bp-admin-sm: 768px;
  --bp-admin-md: 900px;
  --bp-admin-lg: 1100px;
  --bp-admin-xl: 1240px;
  --bp-admin-2xl: 1440px;

  /* ── Touch ── */
  --touch-target-min: 44px;

  /* ── Auth & platform mode (Phase D) ── */
  --auth-gate-bg: var(--color-bg-base);
  --auth-panel-bg: var(--color-bg-elevated);
  --auth-panel-border: var(--color-border-default);
  --platform-accent: var(--color-accent);
  --platform-accent-soft: #6fffd4;
  --platform-sidebar-bg: #0a0b0d;
  --platform-body-bg: #070708;

  /* ── Generic aliases (landing names) ── */
  --bg: var(--color-bg-base);
  --surface: var(--color-bg-elevated);
  --accent: var(--color-accent);
  --accent-hover: var(--color-accent-hover);
  --accent-pressed: var(--color-accent-pressed);
  --border: var(--color-border-default);
  --border-strong: var(--color-border-strong);

  /* ── Legacy Pult aliases (styles.css) — dark default ── */
  --ink: var(--color-fg-primary);
  --text: var(--color-fg-secondary);
  --muted: var(--color-fg-muted);
  --line: var(--color-border-strong);
  --paper: var(--color-bg-elevated);
  --wash: var(--color-bg-base);
  --blue: var(--color-accent);
  --blue-soft: var(--color-accent-subtle);
  --green: var(--color-success);
  --green-soft: var(--color-success-subtle);
  --red: var(--color-error);
  --red-soft: var(--color-error-subtle);
  --amber: var(--color-warning);
  --amber-soft: var(--color-warning-subtle);
  --shadow: var(--elevation-shadow);
  --sidebar: var(--color-bg-base);
  --hover: var(--color-bg-surface);
  --soft-panel: var(--color-bg-elevated);
  --accent-premium: var(--color-accent);
  --surface-premium: var(--color-bg-overlay);
}

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

  --color-bg-base: #f4f5f7;
  --color-bg-elevated: #ffffff;
  --color-bg-surface: #eef0f4;
  --color-bg-overlay: #ffffff;

  --color-fg-primary: #111827;
  --color-fg-secondary: #374151;
  --color-fg-muted: #6b7280;
  --color-fg-faint: #9ca3af;

  --color-border-default: rgba(17, 24, 39, 0.1);
  --color-border-strong: rgba(17, 24, 39, 0.16);

  --color-accent-subtle: rgba(0, 229, 160, 0.1);
  --color-success-subtle: rgba(52, 211, 153, 0.1);
  --color-warning-subtle: rgba(251, 191, 36, 0.12);
  --color-error-subtle: rgba(248, 113, 113, 0.1);
  --color-info-subtle: rgba(96, 165, 250, 0.1);

  --elevation-shadow: 0 8px 26px rgba(17, 24, 39, 0.08);

  --ink: var(--color-fg-primary);
  --text: var(--color-fg-secondary);
  --muted: var(--color-fg-muted);
  --line: var(--color-border-strong);
  --paper: var(--color-bg-elevated);
  --wash: var(--color-bg-base);
  --shadow: var(--elevation-shadow);
  --sidebar: #0a0a0b;
  --hover: var(--color-bg-surface);
  --soft-panel: var(--color-bg-elevated);
}
