/* Variables CSS */
:root {
  /* Light theme (default) */
  --bg-primary: #FFFFFF;
  --bg-secondary: #F5F5F7;
  --bg-tertiary: #E5E5E5;
  
  --text-primary: #1D1D1F;
  --text-secondary: #515154;
  --text-tertiary: #86868B;
  
  --accent: #121212;
  --accent-hover: #333333;
  
  --card-bg: #FFFFFF;
  --card-border: #E5E5E5;
  
  --btn-primary-bg: #121212;
  --btn-primary-text: #FFFFFF;
  --btn-secondary-bg: #E5E5E5;
  --btn-secondary-text: #121212;

  --nav-bg: rgba(255, 255, 255, 0.8);
  --nav-border: rgba(0, 0, 0, 0.1);
  
  --skill-bar-bg: #E5E5E5;
  --skill-progress: #121212;
  
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.1);
  --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
  
  --border-radius-sm: 0.4rem;
  --border-radius-md: 0.8rem;
  --border-radius-lg: 1.6rem;
  
  --spacing-xs: 0.4rem;
  --spacing-sm: 0.8rem;
  --spacing-md: 1.6rem;
  --spacing-lg: 2.4rem;
  --spacing-xl: 3.2rem;
  --spacing-xxl: 4.8rem;
  
  --header-height: 7.2rem;
  --footer-height: 8rem;
  
  --transition-speed: 0.3s;
}

/* Dark theme */
[data-theme="dark"] {
  --bg-primary: #121212;
  --bg-secondary: #1D1D1F;
  --bg-tertiary: #2C2C2E;
  
  --text-primary: #FFFFFF;
  --text-secondary: #CCCCCC;
  --text-tertiary: #999999;
  
  --accent: #FFFFFF;
  --accent-hover: #CCCCCC;
  
  --card-bg: #1D1D1F;
  --card-border: #2C2C2E;
  
  --btn-primary-bg: #FFFFFF;
  --btn-primary-text: #121212;
  --btn-secondary-bg: #2C2C2E;
  --btn-secondary-text: #FFFFFF;

  --nav-bg: rgba(29, 29, 31, 0.8);
  --nav-border: rgba(255, 255, 255, 0.1);
  
  --skill-bar-bg: #2C2C2E;
  --skill-progress: #FFFFFF;
}

/* Media query variables */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-primary: #121212;
    --bg-secondary: #1D1D1F;
    --bg-tertiary: #2C2C2E;
    
    --text-primary: #FFFFFF;
    --text-secondary: #CCCCCC;
    --text-tertiary: #999999;
    
    --accent: #FFFFFF;
    --accent-hover: #CCCCCC;
    
    --card-bg: #1D1D1F;
    --card-border: #2C2C2E;
    
    --btn-primary-bg: #FFFFFF;
    --btn-primary-text: #121212;
    --btn-secondary-bg: #2C2C2E;
    --btn-secondary-text: #FFFFFF;

    --nav-bg: rgba(29, 29, 31, 0.8);
    --nav-border: rgba(255, 255, 255, 0.1);
    
    --skill-bar-bg: #2C2C2E;
    --skill-progress: #FFFFFF;
  }
}