:root {
  /* Color System */
  --primary-50: #e6f1fe;
  --primary-100: #cce3fd;
  --primary-200: #99c7fb;
  --primary-300: #66abf9;
  --primary-400: #338ef7;
  --primary-500: #0071e3; /* Primary Brand Color */
  --primary-600: #005bb6;
  --primary-700: #004489;
  --primary-800: #002e5c;
  --primary-900: #00172f;

  --secondary-50: #eef5ff;
  --secondary-100: #e6f0ff;
  --secondary-200: #d9e8ff;
  --secondary-300: #c7ddff;
  --secondary-400: #a6caff;
  --secondary-500: #86b7fe; /* Secondary Brand Color */
  --secondary-600: #6992cb;
  --secondary-700: #4d6e98;
  --secondary-800: #304966;
  --secondary-900: #142533;

  --accent-50: #e6fff2;
  --accent-100: #ccffe6;
  --accent-200: #99ffcc;
  --accent-300: #66ffb3;
  --accent-400: #33ff99;
  --accent-500: #06c668; /* Accent Brand Color */
  --accent-600: #05a056;
  --accent-700: #047940;
  --accent-800: #02532b;
  --accent-900: #012a15;

  --neutral-50: #f8f9fa;
  --neutral-100: #f1f3f5;
  --neutral-200: #e9ecef;
  --neutral-300: #dee2e6;
  --neutral-400: #ced4da;
  --neutral-500: #adb5bd;
  --neutral-600: #6c757d;
  --neutral-700: #495057;
  --neutral-800: #343a40;
  --neutral-900: #212529;

  /* Semantic Colors */
  --success-500: #10b981;
  --warning-500: #f59e0b;
  --error-500: #ef4444;
  --info-500: #3b82f6;

  /* Light Theme */
  --bg-primary: var(--neutral-50);
  --bg-secondary: #ffffff;
  --bg-tertiary: var(--neutral-100);
  --text-primary: var(--neutral-900);
  --text-secondary: var(--neutral-700);
  --text-tertiary: var(--neutral-600);
  --border-color: var(--neutral-200);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.04), 0 4px 6px rgba(0, 0, 0, 0.05);

  /* Spacing System (8px grid) */
  --space-1: 0.8rem;   /* 8px */
  --space-2: 1.6rem;   /* 16px */
  --space-3: 2.4rem;   /* 24px */
  --space-4: 3.2rem;   /* 32px */
  --space-5: 4.0rem;   /* 40px */
  --space-6: 4.8rem;   /* 48px */
  --space-7: 5.6rem;   /* 56px */
  --space-8: 6.4rem;   /* 64px */
  --space-9: 7.2rem;   /* 72px */
  --space-10: 8.0rem;  /* 80px */

  /* Border Radius */
  --radius-sm: 0.4rem;
  --radius-md: 0.8rem;
  --radius-lg: 1.6rem;
  --radius-full: 9999px;

  /* Z-index */
  --z-header: 100;
  --z-modal: 200;
}

/* Dark Theme */
[data-theme="dark"] {
  --bg-primary: var(--neutral-900);
  --bg-secondary: var(--neutral-800);
  --bg-tertiary: var(--neutral-700);
  --text-primary: var(--neutral-50);
  --text-secondary: var(--neutral-200);
  --text-tertiary: var(--neutral-400);
  --border-color: var(--neutral-700);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.2), 0 1px 3px rgba(0, 0, 0, 0.25);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.15), 0 4px 6px rgba(0, 0, 0, 0.2);
}