/* Optimization: gzip -9 -k -f css/variables.css */
:root {
  /* Colors - Light theme defaults */
  --color-primary: #7C3AED;
  --color-button-primary: #6D28D9;
  --color-primary-blue: #4179f0;
  --color-primary-rgb: 124, 58, 237;
  --color-dark: #F6F7FB;
  --color-dark-rgb: 246, 247, 251;
  --color-light: #1A1A2E;
  --color-light-rgb: 26, 26, 46;
  --color-secondary: #5B6478;
  --color-text-primary: #1A1A2E;
  --color-text-secondary: #5B6478;

  /* RGB components for rgba() usage */
  --color-button-primary-rgb: 109, 40, 217;
  --color-accent-purple-rgb: 153, 57, 235;

  /* Surface/Background */
  --color-surface-card: #FFFFFF;
  --color-surface-card-alt: #EDE8FF;
  --color-gradient-deep: #F0EEFA;
  --color-gradient-mid: #E4DEFF;
  --color-gradient-mobile: #EDE9FE;

  /* Extended text scale */
  --color-text-muted: #374151;
  --color-text-dim: #6B7280;
  --color-text-subtle: #9CA3AF;
  --color-text-faded: #6B7280;
  --color-text-accent: #6D28D9;

  /* Status/Semantic */
  --color-success: #059669;
  --color-error: #DC2626;
  --color-error-alt: #EF4444;
  --color-warning: #D97706;

  /* Accent */
  --color-accent-purple: #7C3AED;
  --color-button-hover: #5B21B6;
  --color-button-text: #FFFFFF;
  --color-progress-purple: #6D28D9;
  --color-spinner: #2563EB;

  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.25rem;
  --spacing-xl: 1.5rem;
  --spacing-xxl: 2rem;
  --spacing-3xl: 3rem;

  /* Border radius */
  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 24px;

  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-normal: 300ms ease;
  --transition-slow: 500ms ease;

  /* Light theme shadows */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.06), 0 6px 6px rgba(0,0,0,0.04);
}

[data-theme="dark"] {
  --color-primary: #D6BCFA;
  --color-button-primary: #5F3DC4;
  --color-primary-rgb: 214, 188, 250;
  --color-dark: #050506;
  --color-dark-rgb: 5, 5, 6;
  --color-light: #FFFFFF;
  --color-light-rgb: 255, 255, 255;
  --color-secondary: #9CA3AF;
  --color-text-primary: #F0F0F0;
  --color-text-secondary: #9798a1;
  --color-button-primary-rgb: 95, 61, 196;
  --color-accent-purple-rgb: 153, 57, 235;
  --color-surface-card: #111215;
  --color-surface-card-alt: #1a1a2e;
  --color-gradient-deep: #0a0015;
  --color-gradient-mid: #1a0a30;
  --color-gradient-mobile: #2a1055;
  --color-text-muted: #e0e0e0;
  --color-text-dim: #bbbbbb;
  --color-text-subtle: #aaaaaa;
  --color-text-faded: #cccccc;
  --color-text-accent: #d1b6ff;
  --color-success: #10b981;
  --color-error: #ef4444;
  --color-error-alt: #ff5252;
  --color-warning: #ff9500;
  --color-accent-purple: #9939EB;
  --color-button-hover: #4b2ca5;
  --color-button-text: #FFFFFF;
  --color-progress-purple: #4d22b3;
  --color-spinner: #0099ff;
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24);
  --shadow-md: 0 4px 6px rgba(0,0,0,0.12), 0 1px 3px rgba(0,0,0,0.24);
  --shadow-lg: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23);
}