:root {
  /* Colors — Core (Paper palette) */
  --color-sidebar-active: #22FF86;
  --color-toggle-badge: #34D399;
  --color-text-primary: #15151A;
  --color-text-secondary: #4A4A55;
  --color-text-tertiary: #6B6B76;
  --color-text-muted: #9D9DA7;
  --color-text-disabled: #C0C0C8;
  --color-border: #E8E8EC;
  --color-border-light: #F0F0F3;
  --color-border-checkbox: #D0D0D8;
  --color-bg-page: #F4F4F6;
  --color-bg-surface: #FFFFFF;
  --color-bg-card: #FFFFFF;
  --color-bg-header: #FAFAFA;
  --color-bg-hover: #FAFAFA;
  --color-bg-input-hover: #F4F4F6;
  --color-bg-segmented: #F5F5F5;
  /* NAN-1780: highlight that sweeps across a skeleton placeholder. Defined
   * per theme because it has to lighten the surface it travels over, and
   * `--color-bg-segmented` inverts between the two palettes. */
  --color-skeleton-sweep: rgba(255, 255, 255, 0.6);

  /* Colors — Status */
  --color-status-green: #22C55E;
  --color-status-green-border: #D4EDDA;
  --color-status-orange: #F59E0B;
  --color-status-orange-text: #D97706;
  --color-status-orange-border: #FDE68A;
  --color-status-red: #EF4444;
  --color-status-red-hover: #DC2626;
  --color-status-red-border: #FECACA;
  --color-status-blue: #3B82F6;
  --color-status-indigo: #6366F1;
  --color-status-indigo-border: #E0E7FF;
  --color-status-gray: #9CA3AF;

  /* Colors — Money */
  --color-money-positive: #22C55E;
  --color-money-negative: #EF4444;

  /* Colors — Backgrounds */
  --color-alert-bg: #FEF3C7;
  --color-danger-bg-hover: #FEF2F2;
  --color-approve-border: #D4EDDA;
  --color-decline-border: #FECACA;
  --color-label-active-border: #BBF7D0;

  /* Button hover */
  --color-btn-primary-hover: #333333;
  --color-btn-secondary-hover-bg: #F4F4F6;
  --color-btn-secondary-hover-border: #D1D5DB;
  --color-btn-icon-hover-bg: #E5E7EB;
  --color-btn-icon-hover-stroke: #374151;

  /* Typography */
  --font-primary: 'Sora', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', system-ui, sans-serif;

  /* Spacing */
  --spacing-2: 2px;
  --spacing-3: 3px;
  --spacing-4: 4px;
  --spacing-6: 6px;
  --spacing-8: 8px;
  --spacing-10: 10px;
  --spacing-12: 12px;
  --spacing-14: 14px;
  --spacing-16: 16px;
  --spacing-20: 20px;
  --spacing-24: 24px;
  --spacing-32: 32px;
  --spacing-48: 48px;

  /* Radius */
  --radius-checkbox-sm: 3px;
  --radius-badge: 4px;
  --radius-segment: 6px;
  --radius-button: 8px;
  --radius-input: 8px;
  --radius-card: 12px;
  --radius-modal: 12px;
  --radius-pill: 999px;

  /* Sizing */
  --sidebar-width: 280px;
  --content-max: 1216px;
  --table-row-height: 52px;
  /* NAN-1785 — header row of every data table. Sat as a bare `44px` in
   * `_shared/adminTable.module.css`, `players/[id]/page.module.css`,
   * `shared/SortableHeader.module.css` and again in the card skeletons that
   * mirror them; a skeleton reserving the old height is exactly how these
   * placeholders rot. Paired with `--table-row-height` above. */
  --table-head-height: 44px;
  --icon-btn-size: 36px;
  --toggle-width: 44px;
  --toggle-height: 24px;
  --toggle-knob: 20px;
  --checkbox-size: 18px;
  --checkbox-size-sm: 16px;
  --code-box-width: 52px;
  --code-box-height: 56px;
  --ai-panel-width: 380px;

  /* NAN-555 — Brand accent.
   * Used for the active sidebar item underline and the standardised
   * `:focus-visible` ring. Sourced from CLAUDE.md frontend rules
   * (`--primary: #ECBD49`). Exposed as a token here so the rest of the
   * design system can adopt it without re-defining the literal hex. */
  --color-brand-accent: #ECBD49;
  /* NAN-555 — Page-fade timing.
   * The default page-transition fade and the command palette modal both
   * read this so future tweaks happen in one place. */
  --page-fade-duration: 180ms;
}

[data-theme="dark"] {
  --color-text-primary: #F3F4F6;
  --color-text-secondary: #9CA3AF;
  --color-text-tertiary: #6B7280;
  --color-text-muted: #6B7280;
  --color-text-disabled: #4B5563;
  --color-border: #374151;
  --color-border-light: #2D3748;
  --color-border-checkbox: #4B5563;
  --color-bg-page: #111827;
  --color-bg-surface: #1F2937;
  --color-bg-card: #1F2937;
  --color-bg-header: #1A2332;
  --color-bg-hover: #1F2937;
  --color-bg-input-hover: #374151;
  --color-bg-segmented: #1F2937;
  /* A white sweep over #1F2937 reads as a flash; lift the surface instead. */
  --color-skeleton-sweep: rgba(255, 255, 255, 0.08);
  --color-btn-primary-hover: #4B5563;
  --color-btn-secondary-hover-bg: #374151;
  --color-btn-secondary-hover-border: #4B5563;
  --color-btn-icon-hover-bg: #374151;
  --color-btn-icon-hover-stroke: #D1D5DB;
  --color-danger-bg-hover: #451A1A;
  --color-alert-bg: #451A00;
}