:root {
  /* ===== Color System (Chapter 2) ===== */
  --color-primary: #2563EB;
  --color-primary-hover: #1D4ED8;
  --color-success: #16A34A;
  --color-warning: #F59E0B;
  --color-danger: #DC2626;

  --color-text-primary: #111827;
  --color-text-secondary: #4B5563;
  --color-border: #E5E7EB;
  --color-bg: #FFFFFF;
  --color-card-bg: #F9FAFB;

  /* Shift colors (accessible palette) */
  --shift-morning: #2563EB;
  --shift-evening: #F59E0B;
  --shift-night: #7C3AED;
  --shift-off: #16A34A;
  --shift-holiday: #DC2626;
  --shift-training: #6B7280;

  /* ===== Typography ===== */
  --font-sans: "Inter", system-ui, "Segoe UI", Roboto, Arial, sans-serif;
  --fs-hero: 3rem;
  --fs-h1: 2.5rem;
  --fs-h2: 2rem;
  --fs-h3: 1.5rem;
  --fs-body: 1.125rem;
  --fs-small: 1rem;
  --fs-caption: 0.875rem;
  --lh-tight: 1.15;
  --lh-normal: 1.6;

  /* ===== Spacing (8px grid) ===== */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  /* ===== Radius ===== */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-full: 999px;

  /* ===== Shadows (soft) ===== */
  --shadow-sm: 0 1px 2px rgba(17, 24, 39, 0.06);
  --shadow-md: 0 4px 12px rgba(17, 24, 39, 0.08);
  --shadow-lg: 0 12px 32px rgba(17, 24, 39, 0.12);

  /* ===== Layout ===== */
  --max-width: 1280px;
  --header-height: 72px;

  /* ===== Motion ===== */
  --transition-fast: 150ms ease;
  --transition-base: 250ms ease;

  --focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.4);
}

/* ===== Dark Mode (designed separately, not inverted) ===== */
[data-theme="dark"] {
  --color-primary: #3B82F6;
  --color-primary-hover: #60A5FA;
  --color-success: #22C55E;
  --color-warning: #FBBF24;
  --color-danger: #EF4444;

  --color-text-primary: #F9FAFB;
  --color-text-secondary: #9CA3AF;
  --color-border: #374151;
  --color-bg: #0F172A;
  --color-card-bg: #1E293B;

  --shift-morning: #3B82F6;
  --shift-evening: #FBBF24;
  --shift-night: #A78BFA;
  --shift-off: #22C55E;
  --shift-holiday: #F87171;
  --shift-training: #9CA3AF;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 12px 32px rgba(0, 0, 0, 0.6);

  --focus-ring: 0 0 0 3px rgba(96, 165, 250, 0.5);
}