:root {
  /* Neutral scale */
  --neutral-50: #f8fafc;
  --neutral-100: #f1f5f9;
  --neutral-200: #e2e8f0;
  --neutral-300: #cbd5e1;
  --neutral-400: #94a3b8;
  --neutral-500: #64748b;
  --neutral-600: #475569;
  --neutral-700: #334155;
  --neutral-800: #1e293b;
  --neutral-900: #0f172a;

  /* Primary & secondary accents */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;

  --secondary-50: #ecfdf3;
  --secondary-100: #d1fae5;
  --secondary-200: #a7f3d0;
  --secondary-500: #10b981;
  --secondary-600: #059669;
  --secondary-700: #047857;

  /* Role-based aliases */
  --color-primary: var(--primary-600);
  --color-primary-strong: var(--primary-700);
  --color-secondary: var(--secondary-600);
  --color-secondary-strong: var(--secondary-700);
  --color-surface: #ffffff;
  --color-surface-subtle: var(--neutral-50);
  --color-surface-muted: var(--neutral-100);
  --color-border: var(--neutral-200);
  --color-border-strong: var(--neutral-300);
  --color-text: var(--neutral-900);
  --color-text-muted: var(--neutral-600);
  --color-text-subtle: var(--neutral-500);
  --color-success: var(--secondary-600);
  --color-warning: #f59e0b;
  --color-danger: #ef4444;
  --color-info: #0ea5e9;

  /* Typography */
  --font-family-sans: "Inter", "Inter var", "Inter VF", "SF Pro Text",
    "SF Pro Display", "Noto Sans", "Roboto", "Segoe UI", "Arial",
    -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  --font-size-hero: 32px;
  --font-size-h1: 24px;
  --font-size-h2: 18px;
  --font-size-body: 14px;
  --line-height-tight: 1.4;
  --line-height-base: 1.5;
  --line-height-relaxed: 1.6;

  /* Spacing scale */
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;

  /* Radii */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 16px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-level-1: 0 6px 16px -10px rgba(15, 23, 42, 0.18);
  --shadow-level-2: 0 12px 28px -18px rgba(15, 23, 42, 0.26);
  --shadow-level-3: 0 18px 40px -24px rgba(15, 23, 42, 0.32);

  /* Legacy aliases to support existing styles */
  --bg-page: var(--color-surface-subtle);
  --bg-page-alt: var(--color-surface-muted);
  --bg-card: var(--color-surface);
  --border-subtle: var(--color-border);
  --border-strong: var(--color-border-strong);
  --accent: var(--color-primary);
  --accent-soft: rgba(79, 70, 229, 0.1);
  --accent-soft-strong: rgba(79, 70, 229, 0.2);
  --accent-dark: var(--color-primary-strong);
  --text-main: var(--color-text);
  --text-muted: var(--color-text-muted);
  --text-soft: var(--color-text-subtle);
  --danger: var(--color-danger);
  --danger-soft: rgba(239, 68, 68, 0.12);
  --warning: var(--color-warning);
  --warning-soft: rgba(245, 158, 11, 0.14);
  --success: var(--color-success);
  --success-soft: rgba(16, 185, 129, 0.14);
  --shadow-soft: var(--shadow-level-3);
}