:root {
  /********************/
  /* Color Primitives */
  /********************/

  /* Gray Scale */
  --gray-50: #f8fafc;
  --gray-50-rgb: 248, 250, 252;
  --gray-100: #f1f5f9;
  --gray-100-rgb: 241, 245, 249;
  --gray-200: #e2e8f0;
  --gray-200-rgb: 226, 232, 240;
  --gray-300: #cbd5e1;
  --gray-300-rgb: 203, 213, 225;
  --gray-400: #94a3b8;
  --gray-400-rgb: 148, 163, 184;
  --gray-500: #64748b;
  --gray-500-rgb: 100, 116, 139;
  --gray-600: #475569;
  --gray-600-rgb: 71, 85, 105;
  --gray-700: #334155;
  --gray-700-rgb: 51, 65, 85;
  --gray-800: #1e293b;
  --gray-800-rgb: 30, 41, 59;
  --gray-850: #0f1419;
  --gray-850-rgb: 15, 20, 25;
  --gray-900: #0a0e13;
  --gray-900-rgb: 10, 14, 19;
  --gray-950: #ecf0f5;
  --gray-950-rgb: 226, 232, 240;

  /* Blue Scale */
  --blue-50: #eff6ff;
  --blue-50-rgb: 239, 246, 255;
  --blue-100: #dbeafe;
  --blue-100-rgb: 219, 234, 254;
  --blue-200: #bfdbfe;
  --blue-200-rgb: 191, 219, 254;
  --blue-300: #93c5fd;
  --blue-300-rgb: 147, 197, 253;
  --blue-500: #116af8;
  --blue-500-rgb: 17, 106, 248;
  --blue-600: #075cde;
  --blue-600-rgb: 37, 99, 235;


  /* Amber/Yellow Scale */
  --amber-50: #fffbeb;
  --amber-50-rgb: 255, 251, 235;
  --amber-300: #fcd34d;
  --amber-300-rgb: 252, 211, 77;
  --amber-400: #f59e0b;
  --amber-400-rgb: 245, 158, 11;
  --amber-500: #f27500;
  --amber-500-rgb: 242, 117, 0;
  --amber-600: #e37102;
  --amber-600-rgb: 227, 113, 2;
  --amber-700: #78350f;
  --amber-700-rgb: 120, 53, 15;
  --amber-800: #ffc169;
  --amber-800-rgb: 255, 193, 105;

  /* Purple Scale */
  --purple-50: #ddd6fe;
  --purple-50-rgb: 221, 214, 254;
  --purple-300: #c4b5fd;
  --purple-300-rgb: 196, 181, 253;
  --purple-500: #8b5cf6;
  --purple-500-rgb: 139, 92, 246;
  --purple-700: #7c3aed;
  --purple-700-rgb: 124, 58, 237;
  --purple-900: #1e1b4b;
  --purple-900-rgb: 30, 27, 75;

  /* Red Scale */
  --red-500: #d65049;
  --red-500-rgb: 214, 80, 73;
  --red-600: #d04c45;
  --red-600-rgb: 208, 76, 69;

  /* Green Scale */
  --green-400: #0ad688;
  --green-400-rgb: 10, 214, 136;
  --green-500: #0ec07c;
  --green-500-rgb: 14, 192, 124;

  /* White */
  --white: #ffffff;
  --white-rgb: 255, 255, 255;

  /*******************/
  /* Dark Mode Tokens (Default) */
  /*******************/

  /* Surface Colors */
  --surface-primary: var(--gray-850);
  --surface-primary-rgb: var(--gray-850-rgb);
  --surface-secondary: var(--gray-900);
  --surface-tertiary: var(--gray-800);
  --surface-overlay: rgba(var(--gray-950-rgb), 0.85);
  --surface-gradient1: radial-gradient(circle at 30% 20%, rgba(17, 106, 248, 0.08) 0%, rgba(17, 106, 248, 0) 50%),
  radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.06) 0%, rgba(139, 92, 246, 0) 50%),
  radial-gradient(circle at 90% 30%, rgba(14, 192, 124, 0.05) 0%, rgba(14, 192, 124, 0) 50%),
  linear-gradient(135deg, var(--gray-900) 0%, var(--gray-800) 50%, var(--gray-850) 100%);

  /* Text Colors */
  --text-primary: var(--white);
  --text-secondary: #8b99a1;
  --text-tertiary: var(--gray-500);
  --text-tertiary2: var(--gray-300);
  --text-disabled: var(--gray-500);
  --text-inverse: var(--gray-850);

  /* Border Colors */
  --border-primary: rgba(255, 255, 255, 0.08);
  --border-secondary: rgba(var(--blue-500-rgb), 0.3);
  --border-accent: var(--amber-300);
  --border-focus: var(--blue-500);

  /* Interactive States */
  --hover-surface: #141b22;
  --active-surface: #475569;
  --focus-ring: rgba(var(--blue-500-rgb), 0.4);

  /* Brand Colors */
  --primary: var(--blue-500);
  --primary-hover: var(--blue-600);
  --primary-light: rgba(var(--blue-500-rgb), 0.15);
  --primary-bg: rgba(var(--white-rgb), 0.03);

  --secondary: var(--amber-300);
  --secondary-hover: var(--amber-400);
  --secondary-light: var(--amber-50);

  --accent: var(--purple-500);
  --accent-hover: var(--purple-700);
  --accent-light: var(--purple-50);
  --accent-bg: var(--purple-900);

  /* Status Colors */
  --success: var(--green-500);
  --success-light: var(--green-400);
  --warning: var(--amber-500);
  --warning-light: var(--amber-600);
  --error: var(--red-500);
  --error-light: var(--red-600);
  --info: var(--blue-500);

  /* AI Button Gradients */
  --ai-gradient-dark: linear-gradient(135deg, #1a0f1f 0%, #1e1b4b 50%, #2e1065 100%);
  --ai-gradient-base: linear-gradient(135deg, #1e1b4b 0%, #2e1065 50%, #3b0e79 100%);
  --ai-gradient-hover: linear-gradient(135deg, #2e1065 0%, #3b0e79 50%, #4c1d95 100%);
  --ai-gradient-light: linear-gradient(135deg, #8b5cf6 0%, #a855f7 50%, #c084fc 100%);

  /*************/
  /* Shadows */
  /*************/
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4);
  --shadow-md: 0 4px 8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 8px 16px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 16px 32px rgba(0, 0, 0, 0.7);

  --shadow-primary: 0 2px 8px rgba(var(--blue-500-rgb), 0.3), 0 1px 3px rgba(0, 0, 0, 0.4);

  --shadow-primary-lg: 0 4px 12px rgba(var(--blue-500-rgb), 0.4), 0 2px 6px rgba(0, 0, 0, 0.5);
  --shadow-centered: 0 -6px 10px 2px rgba(var(--blue-500-rgb), 0.2),
  0 6px 16px 2px rgba(0, 0, 0, 0.5), 0 3px 8px 1px rgba(0, 0, 0, 0.3);

  /*************/
  /* Spacing */
  /*************/
  --space-0-5: 0.125rem; /* 2px */
  --space-1: 0.25rem; /* 4px */
  --space-2: 0.5rem; /* 8px */
  --space-3: 0.75rem; /* 12px */
  --space-4: 1rem; /* 16px */
  --space-5: 1.25rem; /* 20px */
  --space-6: 1.5rem; /* 24px */
  --space-8: 2rem; /* 32px */
  --space-10: 2.5rem; /* 40px */
  --space-12: 3rem; /* 48px */

  /* Container Spacing */
  --container-padding: var(--space-8) var(--space-12);
  --container-gutter: 1.875rem; /* 30px */
  --container-gap: var(--space-5);

  /****************/
  /* Border Radius */
  /****************/
  --radius-xs: 0.125rem; /* 2px */
  --radius-sm: 0.25rem; /* 4px */
  --radius-md: 0.375rem; /* 6px */
  --radius-lg: 0.5rem; /* 8px */
  --radius-xl: 0.75rem; /* 12px */
  --radius-2xl: 1rem; /* 16px */
  --radius-3xl: 1.5rem; /* 24px */
  --radius-4xl: 2rem; /* 32px */
  --radius-full: 9999px;

  /*************/
  /* Typography */
  /*************/
  --font-size-xs: 0.75rem; /* 12px */
  --font-size-13: 0.8125rem; /* 13px */
  --font-size-sm: 0.875rem; /* 14px */
  --font-size-15: 0.94rem; /* 15px */
  --font-size-base: 1rem; /* 16px */
  --font-size-lg: 1.125rem; /* 18px */
  --font-size-xl: 1.25rem; /* 20px */
  --font-size-2xl: 1.5rem; /* 24px */

  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;

  --line-height-tight: 1.25;
  --line-height-normal: 1.5;
  --line-height-relaxed: 1.75;

  --font-code: 'SF Mono', 'Monaco', 'Menlo', monospace;

  /**************/
  /* Components */
  /**************/
  --modal-width-sm: 28rem; /* 448px */
  --modal-width-md: 34rem; /* 512px */
  --modal-width-lg: 36rem; /* 640px */
  --modal-width-xl: 48rem; /* 768px */

  --input-height-sm: 2rem; /* 32px */
  --input-height-md: 2.5rem; /* 40px */
  --input-height-lg: 3rem; /* 48px */

  --button-height-sm: 2rem;
  --button-height-md: 2.5rem;
  --button-height-lg: 3rem;
}

/* Explicit Light Mode (user preference) */
[data-theme='light'] {
  --surface-primary: var(--white);
  --surface-primary-rgb: var(--white-rgb);
  --surface-secondary: var(--gray-50);
  --surface-tertiary: var(--gray-100);
  --surface-overlay: rgba(var(--gray-800-rgb), 0.08);
  --surface-gradient1: radial-gradient(circle at 30% 20%, rgba(17, 106, 248, 0.15) 0%, rgba(17, 106, 248, 0) 50%),
  radial-gradient(circle at 70% 80%, rgba(139, 92, 246, 0.12) 0%, rgba(139, 92, 246, 0) 50%),
  radial-gradient(circle at 90% 30%, rgba(14, 192, 124, 0.1) 0%, rgba(14, 192, 124, 0) 50%),
  linear-gradient(135deg, #f8fafc 0%, #e2e8f0 50%, #f1f5f9 100%);

  --text-primary: rgb(var(--gray-600-rgb));
  --text-secondary: rgba(var(--gray-600-rgb), 0.7);
  --text-tertiary: rgba(var(--gray-600-rgb), 0.6);
  --text-tertiary2: rgba(var(--gray-600-rgb), 0.5);
  --text-disabled: var(--gray-500);
  --text-inverse: var(--white);

  --border-primary: var(--gray-200);
  --border-secondary: rgba(var(--blue-500-rgb), 0.12);

  --hover-surface: var(--gray-100);
  --active-surface: var(--gray-200);
  --focus-ring: rgba(var(--blue-500-rgb), 0.08);

  --primary-light: var(--blue-100);
  --primary-bg: var(--blue-50);

  /* Light mode shadows */
  --shadow-sm: 0 1px 2px rgba(var(--gray-700-rgb), 0.05);
  --shadow-md: 0 4px 6px rgba(var(--gray-700-rgb), 0.1);
  --shadow-lg: 0 10px 15px rgba(var(--gray-700-rgb), 0.1);
  --shadow-xl: 0 20px 25px rgba(var(--gray-700-rgb), 0.15);
}