/* Theme definitions and variables 
==================================================================================

    This file contains the CSS variables for different themes used in the project.
    Each theme is defined using the [data-theme] attribute, and the variables are set
    accordingly. The default theme is set in the :root selector, and the dark and neon
    themes are defined separately. The variables are then applied to various elements
    throughout the CSS to ensure consistent styling across the site.  

    update reference:
    /* Core theme colors 
  --dt-primary: #4CAF50;
  --dt-secondary: #2196F3;
  --dt-accent: #FF9800;
  --dt-warning: #FFC107;
  --dt-error: #F44336;
  --dt-success: #8BC34A;
  
  /* UI element colors 
  --dt-bg: #1E1E1E;
  --dt-card-bg: #252526;
  --dt-border: #555;
  --dt-text: #CCC;
  --dt-text-muted: #888;

  /* Spacing units 
  --dt-space-xs: 0.25rem;
  --dt-space-sm: 0.5rem; 
  --dt-space-md: 1rem;
  --dt-space-lg: 1.5rem;
  --dt-space-xl: 2rem;
  
  /* Component sizes 
  --dt-border-radius: 4px;
  --dt-header-height: 40px;
  --dt-footer-height: 30px;
  
  /* Z-index layers 
  --dt-z-panel: 9000;
  --dt-z-modal: 9100;
  --dt-z-notification: 9200;
  
  /* Breakpoints 
  --dt-breakpoint-sm: 576px;
  --dt-breakpoint-md: 768px;
  --dt-breakpoint-lg: 992px;
  --dt-breakpoint-xl: 1200px;
}


*/

:root {
  --primary-color: #3498db;
  --secondary-color: #2ecc71;
  --accent-color: #e74c3c;
  --background-color: #f4f4f4;
  --text-color: #333333;
  --text-light-color: #777777;
  --border-color: #dddddd;
  --shadow-color: rgba(0, 0, 0, 0.1);
  --primary-rgb: 52, 152, 219; /* RGB values for primary color */

  /**/
  --header-bg-color: #d1d1d1;
  /**/
  --nav-bg-color: #dfdfdf;
  /**/
  --footer-bg-color: #a1a1a1;

  /* card variables */
  --card-bg-color: #ffffff;

  
  /* Code block variables */
  --code-bg-color: #f4f4f4;
  --code-text-color: #333333;

  /* Dropdown variables should be moved to dropdown.css */
  --header-dropdown-bg-color: #ffffff;
  --header-dropdown-text-color: #333333;
  --header-dropdown-border-color: rgba(0, 0, 0, 0.1);
  --header-dropdown-border-radius: 8px;
  --header-dropdown-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  --header-dropdown-item-hover-bg: rgba(52, 152, 219, 0.1);
  --header-dropdown-item-active-bg: rgba(52, 152, 219, 0.2);
  --header-dropdown-animation-duration: 150ms;
  
  /* Theme transition - controls how quickly theme changes are applied */
  /* A shorter time makes theme switching feel snappier */
  --theme-transition-duration: 3000ms; /* Intentionally slow for testing */
}

/* Apply quick transition to all themeable properties */
html {
  transition-property: color, background-color, border-color, outline-color, box-shadow, fill, stroke;
  transition-duration: var(--theme-transition-duration);
  transition-timing-function: ease-in-out;
}

/* For users who prefer reduced motion or no animations */
@media (prefers-reduced-motion: reduce) {
  html {
    transition: none !important;
  }
}

/* Dark theme 
===================================================================================
*/
[data-theme="dark"] {
  --primary-color: #1abc9c;
  --secondary-color: #e7d25b;
  --accent-color: #f0a84b;
  --background-color: #222222;
  --text-color: #f4f4f4;
  --text-light-color: #aaaaaa;
  --border-color: #555555;
  --shadow-color: rgba(0, 0, 0, 0.3);
  --primary-rgb: 26, 188, 156; /* RGB values for primary color */

  /**/
  --header-bg-color: #1a1a1a;
  /**/
  --nav-bg-color: #2a2a2a;
  /**/
  --footer-bg-color: #1a1a1a;

  /* card variables */
  --card-bg-color: #333333;

  
  /* Code block variables */
  --code-bg-color: #1a1a1a;
  --code-text-color: #e0e0e0;

  /* Dropdown variables */
  --header-dropdown-bg-color: #333333;
  --header-dropdown-text-color: #f4f4f4;
  --header-dropdown-border-color: rgba(255, 255, 255, 0.1);
  --header-dropdown-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  --header-dropdown-item-hover-bg: rgba(26, 188, 156, 0.2);
  --header-dropdown-item-active-bg: rgba(26, 188, 156, 0.3);
}

/* Neon theme 
===================================================================================
*/
[data-theme="neon"] {
  --primary-color: #00ff99;
  --secondary-color: #ff00ff;
  --accent-color: #ffff00;
  --background-color: #0a0a20;
  --text-color: #ffffff;
  --text-light-color: #aaaaff;
  --border-color: #00ffff;
  --shadow-color: rgba(0, 255, 255, 0.2);
  --primary-rgb: 0, 255, 153; /* RGB values for primary color */

  /**/
  --header-bg-color: #080818;
  /**/
  --nav-bg-color: #121225;
  /**/
  --footer-bg-color: #080818;

  /* card variables */
  --card-bg-color: #1a1a2e;

  
  /* Code block variables */
  --code-bg-color: #0d1429;
  --code-text-color: #00ffff;

  /* Dropdown variables */
  --header-dropdown-bg-color: #1a1a2e;
  --header-dropdown-text-color: #00ffff;
  --header-dropdown-border-color: rgba(0, 255, 255, 0.2);
  --header-dropdown-border-radius: 8px;
  --header-dropdown-shadow: 0 4px 15px rgba(0, 255, 255, 0.2);
  --header-dropdown-item-hover-bg: rgba(0, 255, 153, 0.2);
  --header-dropdown-item-active-bg: rgba(0, 255, 153, 0.3);
}

/* Apply theme variables 
===================================================================================
*/
body {
  background-color: var(--background-color);
  color: var(--text-color);
}

header {
  background-color: var(--header-bg-color);
}

.main-nav {
  background-color: var(--nav-bg-color);
}

.project-card {
  background-color: var(--card-bg-color);
  border-color: var(--border-color);
  box-shadow: 0 2px 10px var(--shadow-color);
}

.tech-badge {
  background-color: var(--secondary-color);
  color: var(--card-bg-color);
}

.project-link {
  background-color: var(--primary-color);
}

.project-link:hover {
  background-color: var(--accent-color);
}

.skill-bar {
  background-color: var(--border-color);
}

.skill-progress {
  background-color: var(--primary-color);
}

.theme-selector {
  background-color: var(--card-bg-color);
  color: var(--text-color);
  border: 1px solid var(--border-color);
}

.theme-btn {
  background-color: var(--nav-bg-color);
  color: var(--text-color);
}

.theme-btn.active {
  box-shadow: 0 0 0 2px var(--primary-color);
}

footer {
  background-color: var(--footer-bg-color);
}