/* Light Theme (Default) */
:root {
  /* Background Colors */
  --bg-primary: #ffffff;
  --bg-secondary: #f8f9fa;
  --bg-tertiary: #e9ecef;
  
  /* Text Colors */
  --text-primary: #1a1a1a;
  --text-secondary: #6c757d;
  --text-tertiary: #adb5bd;
  
  /* Border Colors */
  --border-light: #e9ecef;
  --border-primary: #dee2e6;
  --border-dark: #adb5bd;
  
  /* Accent Colors - Apple-inspired blue */
  --accent-primary: #007aff;
  --accent-hover: #0056d6;
  --accent-light: #cce7ff;
  
  /* Status Colors */
  --success-primary: #28a745;
  --warning-primary: #ffc107;
  --error-primary: #dc3545;
  --info-primary: #17a2b8;
  
  /* Language Colors for Repository Cards */
  --lang-javascript: #f1e05a;
  --lang-typescript: #2b7489;
  --lang-python: #3572a5;
  --lang-html: #e34c26;
  --lang-css: #563d7c;
  --lang-java: #b07219;
  --lang-cpp: #f34b7d;
  --lang-go: #00add8;
  --lang-rust: #dea584;
  --lang-swift: #ffac45;
  --lang-kotlin: #f18e33;
  --lang-php: #4f5d95;
  --lang-ruby: #701516;
  --lang-shell: #89e051;
  --lang-vue: #2c3e50;
  --lang-react: #61dafb;
  --lang-default: var(--accent-primary);
}

/* Dark Theme */
[data-theme="dark"] {
  /* Background Colors */
  --bg-primary: #000000;
  --bg-secondary: #1c1c1e;
  --bg-tertiary: #2c2c2e;
  
  /* Text Colors */
  --text-primary: #ffffff;
  --text-secondary: #8e8e93;
  --text-tertiary: #636366;
  
  /* Border Colors */
  --border-light: #2c2c2e;
  --border-primary: #3a3a3c;
  --border-dark: #48484a;
  
  /* Accent Colors - Adjusted for dark mode */
  --accent-primary: #0a84ff;
  --accent-hover: #409cff;
  --accent-light: #1e3a5f;
  
  /* Status Colors - Dark mode variants */
  --success-primary: #30d158;
  --warning-primary: #ff9f0a;
  --error-primary: #ff453a;
  --info-primary: #64d2ff;
  
  /* Language Colors - Adjusted for dark mode visibility */
  --lang-javascript: #f7df1e;
  --lang-typescript: #3178c6;
  --lang-python: #4b8bbe;
  --lang-html: #e34c26;
  --lang-css: #264de4;
  --lang-java: #ed8b00;
  --lang-cpp: #00599c;
  --lang-go: #00add8;
  --lang-rust: #ce422b;
  --lang-swift: #fa7343;
  --lang-kotlin: #7f52ff;
  --lang-php: #777bb4;
  --lang-ruby: #cc342d;
  --lang-shell: #4eaa25;
  --lang-vue: #4fc08d;
  --lang-react: #61dafb;
  --lang-default: var(--accent-primary);
}

/* System Theme Detection - Only apply when no explicit theme is set */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    /* Background Colors */
    --bg-primary: #000000;
    --bg-secondary: #1c1c1e;
    --bg-tertiary: #2c2c2e;
    
    /* Text Colors */
    --text-primary: #ffffff;
    --text-secondary: #8e8e93;
    --text-tertiary: #636366;
    
    /* Border Colors */
    --border-light: #2c2c2e;
    --border-primary: #3a3a3c;
    --border-dark: #48484a;
    
    /* Accent Colors */
    --accent-primary: #0a84ff;
    --accent-hover: #409cff;
    --accent-light: #1e3a5f;
    
    /* Status Colors */
    --success-primary: #30d158;
    --warning-primary: #ff9f0a;
    --error-primary: #ff453a;
    --info-primary: #64d2ff;
  }
}

/* Theme Toggle Animation */
.theme-toggle-icon {
  transition: transform var(--transition-base);
  display: inline-block;
}

[data-theme="dark"] .theme-toggle-icon {
  transform: rotate(180deg);
}

/* Enhanced Dark Mode Styles */
[data-theme="dark"] .header {
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

[data-theme="dark"] .project-card,
[data-theme="dark"] .repo-card,
[data-theme="dark"] .skill-category,
[data-theme="dark"] .contact-link {
  background-color: var(--bg-secondary);
  border-color: var(--border-primary);
}

[data-theme="dark"] .project-card:hover,
[data-theme="dark"] .repo-card:hover,
[data-theme="dark"] .contact-link:hover {
  background-color: var(--bg-tertiary);
  box-shadow: 0 10px 30px rgba(255, 255, 255, 0.1);
}

/* Language Color Mapping */
.language-dot[data-language="javascript"] { background-color: var(--lang-javascript); }
.language-dot[data-language="typescript"] { background-color: var(--lang-typescript); }
.language-dot[data-language="python"] { background-color: var(--lang-python); }
.language-dot[data-language="html"] { background-color: var(--lang-html); }
.language-dot[data-language="css"] { background-color: var(--lang-css); }
.language-dot[data-language="java"] { background-color: var(--lang-java); }
.language-dot[data-language="c++"] { background-color: var(--lang-cpp); }
.language-dot[data-language="go"] { background-color: var(--lang-go); }
.language-dot[data-language="rust"] { background-color: var(--lang-rust); }
.language-dot[data-language="swift"] { background-color: var(--lang-swift); }
.language-dot[data-language="kotlin"] { background-color: var(--lang-kotlin); }
.language-dot[data-language="php"] { background-color: var(--lang-php); }
.language-dot[data-language="ruby"] { background-color: var(--lang-ruby); }
.language-dot[data-language="shell"] { background-color: var(--lang-shell); }
.language-dot[data-language="vue"] { background-color: var(--lang-vue); }
.language-dot[data-language="react"] { background-color: var(--lang-react); }

/* Smooth theme transitions */
*,
*::before,
*::after {
  transition: background-color var(--transition-base), 
              color var(--transition-base), 
              border-color var(--transition-base);
}

/* High contrast adjustments */
@media (prefers-contrast: high) {
  :root {
    --text-secondary: var(--text-primary);
    --border-light: var(--border-dark);
  }
  
  [data-theme="dark"] {
    --bg-secondary: #111111;
    --text-secondary: #cccccc;
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .theme-toggle-icon {
    transition: none;
  }
  
  [data-theme="dark"] .theme-toggle-icon {
    transform: none;
  }
}

/* Focus states with theme awareness */
:focus-visible {
  outline-color: var(--accent-primary);
}

[data-theme="dark"] :focus-visible {
  outline-color: var(--accent-primary);
  box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--accent-primary);
}

/* Selection colors */
::selection {
  background-color: var(--accent-light);
  color: var(--text-primary);
}

[data-theme="dark"] ::selection {
  background-color: var(--accent-primary);
  color: var(--bg-primary);
}