/*
  CSS Custom Properties - Theme colors and design tokens
*/

:root {
  /* Light theme colors (default) */
  --color-text: hsl(0deg 0% 5%);
  --color-background: hsl(230deg 20% 95%);
  --color-primary: hsl(345deg 80% 35%);
  --color-secondary: hsl(181deg 94% 44%);
  --color-accent: hsl(334deg 61.5% 35.7%);
  
  /* Grays */
  --color-gray-50: hsl(0deg 0% 95%);
  --color-gray-100: hsl(0deg 0% 90%);
  --color-gray-300: hsl(0deg 0% 70%);
  --color-gray-500: hsl(0deg 0% 50%);
  --color-gray-700: hsl(0deg 0% 30%);
  --color-gray-900: hsl(0deg 0% 10%);
  
  /* Shadows */
  --shadow-low: 0 1px 3px hsla(0deg 0% 0% / 0.1);
  --shadow-medium: 0 4px 6px hsla(0deg 0% 0% / 0.1);
  --shadow-high: 0 10px 25px hsla(0deg 0% 0% / 0.15);
  
  /* Spacing */
  --spacing-xs: 0.25rem;
  --spacing-sm: 0.5rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Border radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 150ms ease;
  --transition-medium: 250ms ease;
  --transition-slow: 350ms ease;
}

/* Dark theme */
[data-theme="dark"] {
  --color-text: hsl(0deg 0% 100%);
  --color-background: hsl(230deg 20% 8%);
  --color-primary: hsl(181deg 94% 44%);
  --color-secondary: hsl(345deg 60% 55%);
  --color-accent: hsl(334deg 61.5% 45%);
  
  /* Adjust grays for dark mode */
  --color-gray-50: hsl(0deg 0% 10%);
  --color-gray-100: hsl(0deg 0% 15%);
  --color-gray-300: hsl(0deg 0% 30%);
  --color-gray-500: hsl(0deg 0% 50%);
  --color-gray-700: hsl(0deg 0% 70%);
  --color-gray-900: hsl(0deg 0% 90%);
  
  /* Adjust shadows for dark mode */
  --shadow-low: 0 1px 3px hsla(0deg 0% 0% / 0.3);
  --shadow-medium: 0 4px 6px hsla(0deg 0% 0% / 0.4);
  --shadow-high: 0 10px 25px hsla(0deg 0% 0% / 0.5);
}