:root {
    /* Colors */
    --primary-hue: 235;
    --primary-saturation: 85%;
    --accent-hue: 330;
    
    /* Light Theme Colors */
    --primary-color: hsl(var(--primary-hue), var(--primary-saturation), 65%);
    --primary-hover: hsl(var(--primary-hue), var(--primary-saturation), 55%);
    --secondary-color: hsl(var(--accent-hue), 85%, 65%);
    --secondary-hover: hsl(var(--accent-hue), 85%, 55%);
    
    --text-primary: hsl(222, 45%, 15%);
    --text-secondary: hsl(222, 25%, 40%);
    --text-tertiary: hsl(222, 15%, 50%);
    
    --background-primary: hsl(0, 0%, 100%);
    --background-secondary: hsl(220, 20%, 97%);
    --background-tertiary: hsl(220, 15%, 95%);
    
    --surface-primary: hsla(0, 0%, 100%, 0.95);
    --surface-primary-rgb: 255, 255, 255;
    --surface-secondary: hsla(220, 20%, 97%, 0.95);
    --surface-tertiary: hsla(220, 15%, 95%, 0.95);
    
    --border-color: hsla(220, 15%, 85%, 0.5);
    --border-color-hover: hsla(220, 15%, 70%, 0.7);
    
    /* Glass Effects */
    --glass-background: hsla(0, 0%, 100%, 0.7);
    --glass-border: hsla(0, 0%, 100%, 0.2);
    --glass-blur: blur(10px);
    
    /* Shadows */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-primary: 0 8px 24px rgba(var(--primary-hue), var(--primary-saturation), 50%, 0.25);
    
    /* Dark Theme Colors */
    --dark-background-primary: hsl(222, 45%, 7%);
    --dark-background-secondary: hsl(222, 45%, 10%);
    --dark-background-tertiary: hsl(222, 45%, 13%);
    
    --dark-surface-primary: hsla(222, 45%, 10%, 0.95);
    --dark-surface-primary-rgb: 17, 23, 35;
    --dark-surface-secondary: hsla(222, 45%, 13%, 0.95);
    --dark-surface-tertiary: hsla(222, 45%, 16%, 0.95);
    
    --dark-text-primary: hsl(220, 15%, 85%);
    --dark-text-secondary: hsl(220, 15%, 65%);
    --dark-text-tertiary: hsl(220, 15%, 50%);
    
    --dark-border-color: hsla(220, 45%, 30%, 0.5);
    --dark-border-color-hover: hsla(220, 45%, 40%, 0.7);
    
    --dark-glass-background: hsla(222, 45%, 15%, 0.7);
    --dark-glass-border: hsla(222, 45%, 30%, 0.2);
    
    /* Spacing */
    --spacing-xs: 0.5rem;   /* 8px */
    --spacing-sm: 0.75rem;  /* 12px */
    --spacing-md: 1rem;     /* 16px */
    --spacing-lg: 1.5rem;   /* 24px */
    --spacing-xl: 2rem;     /* 32px */
    --spacing-2xl: 3rem;    /* 48px */
    
    /* Border Radius */
    --radius-sm: 0.375rem;  /* 6px */
    --radius-md: 0.5rem;    /* 8px */
    --radius-lg: 0.75rem;   /* 12px */
    --radius-xl: 1rem;      /* 16px */
    --radius-2xl: 1.5rem;   /* 24px */
    --radius-full: 9999px;
    
    /* Font Sizes */
    --font-size-xs: 0.875rem;  /* 14px */
    --font-size-sm: 1rem;      /* 16px */
    --font-size-md: 1.125rem;  /* 18px */
    --font-size-lg: 1.25rem;   /* 20px */
    --font-size-xl: 1.5rem;    /* 24px */
    --font-size-2xl: 2.25rem;  /* 36px */
    
    /* Z-Index */
    --z-below: -1;
    --z-normal: 1;
    --z-above: 10;
    --z-fixed: 100;
    --z-modal: 1000;
    
    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.5s ease;
    --transition-bounce: 0.5s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Dark Theme */
[data-theme="dark"] {
    --text-primary: var(--dark-text-primary);
    --text-secondary: var(--dark-text-secondary);
    --text-tertiary: var(--dark-text-tertiary);
    
    --background-primary: var(--dark-background-primary);
    --background-secondary: var(--dark-background-secondary);
    --background-tertiary: var(--dark-background-tertiary);
    
    --surface-primary: var(--dark-surface-primary);
    --surface-primary-rgb: var(--dark-surface-primary-rgb);
    --surface-secondary: var(--dark-surface-secondary);
    --surface-tertiary: var(--dark-surface-tertiary);
    
    --border-color: var(--dark-border-color);
    --border-color-hover: var(--dark-border-color-hover);
    
    --glass-background: var(--dark-glass-background);
    --glass-border: var(--dark-glass-border);
    
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.3);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.4);
    --shadow-primary: 0 8px 24px rgba(var(--primary-hue), var(--primary-saturation), 50%, 0.4);
}