:root {
  /* Primary Colors - Same in both themes */
  --primary-color: #ff6600;
  --primary-light: #ff8533;
  --primary-lighter: #ffa45e;
  --primary-dark: #ff7755;
  
  /* Theme Colors - Dark Theme (Default) */
  --bg-dark: #000000;
  --bg-darker: #0d0d0d;
  --bg-card: rgba(255, 255, 255, 0.05);
  --bg-glass: rgba(29, 29, 29, 0.6);
  --bg-glass-focus: rgba(29, 29, 29, 0.8);
  --bg-nav-overlay: rgba(29, 29, 29, 0.9);
  
  --text-primary: #ffffff;
  --text-secondary: #dcdcdc;
  --text-muted: #999999;
  --text-dark: #333333;
  
  --border-light: rgba(255, 255, 255, 0.2);
  --border-primary: rgba(255, 102, 0, 0.3);
  
  --shadow-dark: rgba(0, 0, 0, 0.2);
  --shadow-darker: rgba(0, 0, 0, 0.3);
  --shadow-primary: rgba(255, 126, 95, 0.4);
  --shadow-primary-hover: rgba(255, 126, 95, 0.6);
  
  --gradient-primary: linear-gradient(135deg, var(--primary-dark), var(--primary-lighter));
  --gradient-hero: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.7));
  --gradient-results: linear-gradient(-45deg, #0d0d0d, #1a1a1a, #27170f, #192d36, #111111, #17063e, #290441);
  
  /* Theme Transitions */
  --theme-transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Light Theme Variables */
[data-theme="light"] {
  --bg-dark: #ffffff;
  --bg-darker: #f5f5f5;
  --bg-card: rgba(0, 0, 0, 0.02);
  --bg-glass: rgba(215, 215, 215, 0.8);
  --bg-glass-focus: rgba(172, 172, 172, 0.4);
  --bg-nav-overlay: rgba(228, 228, 228, 0.9);
  
  --text-primary: #333333;
  --text-secondary: #666666;
  --text-muted: #888888;
  --text-dark: #000000;
  
  --border-light: rgba(0, 0, 0, 0.1);
  --border-primary: rgba(255, 102, 0, 0.2);
  
  --shadow-dark: rgba(0, 0, 0, 0.1);
  --shadow-darker: rgba(0, 0, 0, 0.15);
  --shadow-primary: rgba(255, 126, 95, 0.3);
  --shadow-primary-hover: rgba(255, 126, 95, 0.4);
  
  --gradient-primary: linear-gradient(135deg, var(--primary-dark), var(--primary-lighter));
  --gradient-hero: linear-gradient(rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.4), rgba(255, 255, 255, 0.2));
  --gradient-results: linear-gradient(-45deg, #d5d4c6, #bcbcbc, #e8d4bf, #edc1c7, #debfdc, #e2c2fd, #c1f1e2);
}

/* Apply transitions to specific properties for better performance */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Poppins", sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Apply theme transitions to relevant properties only */
body,
.nav,
.card,
input,
button,
.theme-toggle,
a {
  transition: var(--theme-transition);
}

/* Theme toggle button animations */
.theme-toggle i {
  transition: transform 0.5s ease;
}

.theme-toggle-animation i {
  animation: rotateIcon 0.5s ease;
}

@keyframes rotateIcon {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}