:root {
  /* Colors — Luminous Nursery */
  --color-primary: #0061ff;
  --color-primary-dark: #004bca;
  --color-primary-light: #dbe1ff;
  --color-on-primary: #ffffff;

  --color-background: #f9f9fc;
  --color-surface: #ffffff;
  --color-surface-muted: #f3f3f6;
  --color-surface-elevated: #f8f9fa;
  --color-border: #e9ecef;
  --color-border-strong: #c2c6d9;

  --color-text: #1a1c1e;
  --color-text-secondary: #6c757d;
  --color-text-muted: #737687;

  --color-success: #10b981;
  --color-success-bg: #d1fae5;
  --color-error: #ba1a1a;
  --color-error-bg: #ffdad6;
  --color-warning: #f59e0b;
  --color-warning-bg: #fef3c7;

  /* Activity colors */
  --color-pumping: #2563eb;
  --color-pumping-bg: #dbeafe;
  --color-feeding: #ea580c;
  --color-feeding-bg: #ffedd5;
  --color-sleep: #7c3aed;
  --color-sleep-bg: #ede9fe;
  --color-diaper: #16a34a;
  --color-diaper-bg: #dcfce7;
  --color-growth: #0d9488;
  --color-growth-bg: #ccfbf1;

  --color-milestone: #db2777;
  --color-milestone-bg: #fce7f3;
  --color-profile: #64748b;
  --color-profile-bg: #f1f5f9;
  --color-reports: #6366f1;
  --color-reports-bg: #e0e7ff;

  /* Typography */
  --font-heading: 'Plus Jakarta Sans', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;

  --text-xs: 0.6875rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.25rem;
  --text-xl: 1.5rem;
  --text-2xl: 1.875rem;

  /* Spacing — 8px grid */
  --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;

  /* Radius */
  --radius-sm: 0.25rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  /* Layout */
  --header-height: 4rem;
  --nav-height: 4.25rem;
  --footer-actions-height: 0px;
  --footer-total-height: calc(var(--nav-height) + var(--footer-actions-height) + env(safe-area-inset-bottom, 0px));
  --fab-size: 3.5rem;
  --max-width: 480px;
  --page-padding: var(--space-4);

  /* Shadows */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.08);

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

  /* Z-index */
  --z-header: 100;
  --z-nav: 200;
  --z-fab: 210;
  --z-modal: 500;
  --z-toast: 600;

  --color-header-bg: rgba(249, 249, 252, 0.9);
}

[data-theme="dark"] {
  --color-primary: #4d8dff;
  --color-primary-dark: #3a7aef;
  --color-primary-light: #1a2d5c;
  --color-on-primary: #ffffff;

  --color-background: #0f1118;
  --color-surface: #1a1d28;
  --color-surface-muted: #232736;
  --color-surface-elevated: #2a2f42;
  --color-border: #2e3548;
  --color-border-strong: #3d4660;

  --color-text: #e8eaed;
  --color-text-secondary: #9aa3b5;
  --color-text-muted: #7a8499;

  --color-success-bg: #0d3328;
  --color-error-bg: #3d1515;
  --color-warning-bg: #3d2e0a;

  --color-pumping-bg: #152a4a;
  --color-feeding-bg: #3d2210;
  --color-sleep-bg: #2a1a4a;
  --color-diaper-bg: #0d3320;
  --color-growth-bg: #0d332e;
  --color-milestone-bg: #3d1528;
  --color-profile-bg: #232736;
  --color-reports-bg: #1e1b4b;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.3);
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);

  --color-header-bg: rgba(15, 17, 24, 0.92);
}