:root {
  /* Colors — Quiet Command Center palette */
  --color-paper: #FAFAF8;
  --color-paper-elevated: #FFFFFF;
  --color-paper-sunken: #F4F4F0;
  --color-ink: #1A1A2E;
  --color-ink-secondary: #4A4A5A;
  --color-ink-tertiary: #8A8A96;
  --color-ink-placeholder: #B0B0BA;
  --color-border: #E4E4E0;
  --color-border-strong: #D0D0CC;

  /* Accent — Indigo/Purple (matches landing page) */
  --color-accent: #6366f1;
  --color-accent-hover: #4f46e5;
  --color-accent-light: #eef2ff;
  --color-accent-text: #4338ca;

  /* Secondary — Mineral Green */
  --color-secondary: #0D9488;
  --color-secondary-hover: #0F766E;
  --color-secondary-light: #F0FDFA;
  --color-secondary-text: #115E59;

  /* Status */
  --color-success: #16A34A;
  --color-success-light: #F0FDF4;
  --color-warning: #D97706;
  --color-warning-light: #FFFBEB;
  --color-danger: #DC2626;
  --color-danger-light: #FEF2F2;

  /* Health */
  --color-on-track: var(--color-success);
  --color-at-risk: var(--color-warning);
  --color-off-track: var(--color-danger);

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.375rem;
  --radius-lg: 0.5rem;
  --radius-xl: 0.75rem;

  /* Shadows */
  --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
  --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.05);
  --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.07), 0 4px 6px -4px rgb(0 0 0 / 0.05);

  /* Nav */
  --nav-width: 240px;
  --topbar-height: 56px;
}

/* Dark mode — Phase 4 */
@media (prefers-color-scheme: dark) {
  :root {
    /* Colors — Dark palette */
    --color-paper: #1a1a2e;
    --color-paper-elevated: #252540;
    --color-paper-sunken: #111122;
    --color-ink: #e0e0e8;
    --color-ink-secondary: #a0a0b0;
    --color-ink-tertiary: #707080;
    --color-ink-placeholder: #505060;
    --color-border: #2a2a40;
    --color-border-strong: #3a3a55;

    /* Accent — Indigo/Purple (brighter for dark) */
    --color-accent: #818cf8;
    --color-accent-hover: #a5b4fc;
    --color-accent-light: #1e1b4b;
    --color-accent-text: #a5b4fc;

    /* Secondary — Mineral Green (brighter for dark) */
    --color-secondary: #2dd4bf;
    --color-secondary-hover: #5eead4;
    --color-secondary-light: #0f2a28;
    --color-secondary-text: #5eead4;

    /* Status (adjusted for dark backgrounds) */
    --color-success: #22c55e;
    --color-success-light: #0f2a1a;
    --color-warning: #f59e0b;
    --color-warning-light: #2a2010;
    --color-danger: #ef4444;
    --color-danger-light: #2a1010;

    /* Shadows (darker, less opacity) */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.2);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.3), 0 2px 4px -2px rgb(0 0 0 / 0.2);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.3), 0 4px 6px -4px rgb(0 0 0 / 0.2);
  }
}