/* ==========================================================================
   theme.css - Dark and Light Mode Support
   ========================================================================== */

/* Dark Mode Variables Override */
[data-theme="dark"] {
  --color-bg-primary: #0A0A0A;
  --color-bg-secondary: #111111;
  --color-bg-tertiary: #1A1A1A;

  --color-text-primary: #F9FAFB;
  --color-text-secondary: #D1D5DB;
  --color-text-tertiary: #9CA3AF;
  --color-text-inverse: #000000;

  --color-border: #333333;
  --color-border-hover: #444444;
  --color-border-light: rgba(255, 255, 255, 0.1);

  --color-primary-light: rgba(0, 85, 255, 0.2);
  
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.6);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.7);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.8);
}

/* Base OS Preference Fallback */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --color-bg-primary: #0A0A0A;
    --color-bg-secondary: #111111;
    --color-bg-tertiary: #1A1A1A;
  
    --color-text-primary: #F9FAFB;
    --color-text-secondary: #D1D5DB;
    --color-text-tertiary: #9CA3AF;
    --color-text-inverse: #000000;
  
    --color-border: #333333;
    --color-border-hover: #444444;
    --color-border-light: rgba(255, 255, 255, 0.1);
  
    --color-primary-light: rgba(0, 85, 255, 0.2);
  }
}

/* Specific Dark Mode Overrides */
[data-theme="dark"] .navbar {
  background: rgba(10, 10, 10, 0.85);
}
[data-theme="dark"] .navbar.scrolled {
  background: rgba(17, 17, 17, 0.95);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .navbar {
    background: rgba(10, 10, 10, 0.85);
  }
  :root:not([data-theme="light"]) .navbar.scrolled {
    background: rgba(17, 17, 17, 0.95);
  }
}