/* ==========================================================================
   Light Theme Variables & Styles
   ========================================================================== */

/* Light Theme Variant */
body.light-theme {
  --color-bg-base: #F8FAFC;
  --color-bg-surface: #F1F5F9;
  --color-bg-surface-hover: #E2E8F0;
  
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-muted: #94A3B8;
  
  --color-primary: #0891B2; /* Teal / Adjusted Cyan for light theme */
  --color-primary-hover: #0E7490;
  --color-secondary: #7C3AED; /* Vibrant Purple */
  
  --color-success: #10B981;
  --color-warning: #F59E0B;
  --color-danger: #EF4444;
  
  --color-gray-100: #F1F5F9;
  --color-gray-300: #CBD5E1;
  --color-gray-500: #64748B;
  --color-gray-700: #334155;
  --color-gray-900: #0F172A;

  /* Light theme shadow adjustments */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --glow-primary: 0 0 10px rgba(8, 145, 178, 0.2), 0 0 20px rgba(8, 145, 178, 0.1);
  --glow-secondary: 0 0 10px rgba(124, 58, 237, 0.2), 0 0 20px rgba(124, 58, 237, 0.1);
}

/* Light Theme Header */
body.light-theme .site-header {
  background-color: rgba(241, 245, 249, 0.95);
  border-bottom: 1px solid var(--color-gray-300);
  box-shadow: 0 4px 30px rgba(8, 145, 178, 0.08);
}

body.light-theme .brand-logo {
  color: var(--color-text-primary);
}

body.light-theme .nav-link {
  color: var(--color-text-secondary);
}

body.light-theme .nav-link:hover,
body.light-theme .nav-link.active {
  color: var(--color-primary);
}

/* Light Theme Buttons */
body.light-theme .btn-primary {
  background-color: var(--color-primary);
  color: #FFFFFF!important;
  box-shadow: var(--shadow-md);
}

body.light-theme .btn-primary:hover {
  background-color: var(--color-primary-hover);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}

body.light-theme .btn-secondary {
  background-color: transparent;
  color: var(--color-primary);
  border: 2px solid var(--color-primary);
}

body.light-theme .btn-secondary:hover {
  background-color: rgba(8, 145, 178, 0.1);
  border-color: var(--color-primary-hover);
  color: var(--color-primary-hover);
}

body.light-theme .btn-outline {
  border: 2px solid var(--color-primary);
  color: var(--color-primary);
  background-color: transparent;
}

body.light-theme .btn-outline:hover {
  background-color: rgba(8, 145, 178, 0.1);
  box-shadow: var(--glow-primary);
}

/* Light Theme Cards & Surfaces */
body.light-theme .card,
body.light-theme .news-card,
body.light-theme .review-card,
body.light-theme .hardware-card {
  background-color: #FFFFFF;
  border: 1px solid var(--color-gray-300);
  box-shadow: var(--shadow-md);
}

body.light-theme .card:hover,
body.light-theme .news-card:hover,
body.light-theme .review-card:hover,
body.light-theme .hardware-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-lg), var(--glow-primary);
}

/* Light Theme Featured Cards */
body.light-theme .featured-news-card,
body.light-theme .featured-hardware-card {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.08) 0%, rgba(124, 58, 237, 0.08) 100%);
  border: 2px solid var(--color-primary);
  box-shadow: var(--shadow-md), var(--glow-primary);
}

/* Light Theme Footer */
body.light-theme .site-footer {
  background-color: #F1F5F9;
  border-top: 1px solid var(--color-gray-300);
}

body.light-theme .footer-heading::after {
  background-color: var(--color-secondary);
  box-shadow: var(--glow-secondary);
}

body.light-theme .footer-links a:hover,
body.light-theme .footer-links a:focus-visible {
  color: var(--color-primary);
  text-shadow: 0 0 8px rgba(8, 145, 178, 0.3);
}

body.light-theme .social-links a {
  background-color: #FFFFFF;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-gray-300);
}

body.light-theme .social-links a:hover,
body.light-theme .social-links a:focus-visible {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: var(--glow-primary);
}

/* Light Theme Forms */
body.light-theme input[type="text"],
body.light-theme input[type="email"],
body.light-theme input[type="password"],
body.light-theme textarea,
body.light-theme select {
  background-color: #FFFFFF;
  border: 1px solid var(--color-gray-300);
  color: var(--color-text-primary);
}

body.light-theme input[type="text"]:focus,
body.light-theme input[type="email"]:focus,
body.light-theme input[type="password"]:focus,
body.light-theme textarea:focus,
body.light-theme select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.1), var(--glow-primary);
  outline: none;
}

/* Light Theme Filter Buttons */
body.light-theme .news-filter-btn,
body.light-theme .filter-btn {
  background-color: #FFFFFF;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-gray-300);
}

body.light-theme .news-filter-btn:hover,
body.light-theme .news-filter-btn.active,
body.light-theme .filter-btn:hover,
body.light-theme .filter-btn.active {
  border-color: var(--color-primary);
  color: var(--color-primary);
  background-color: rgba(8, 145, 178, 0.05);
  box-shadow: var(--glow-primary);
}

/* Light Theme Badges */
body.light-theme .badge,
body.light-theme .featured-news-badge,
body.light-theme .badge-primary {
  background-color: var(--color-primary);
  color: #FFFFFF;
}

body.light-theme .badge-secondary {
  background-color: var(--color-secondary);
  color: #FFFFFF;
}

body.light-theme .badge-success {
  background-color: var(--color-success);
  color: #FFFFFF;
}

body.light-theme .badge-warning {
  background-color: var(--color-warning);
  color: #000000;
}

body.light-theme .badge-danger {
  background-color: var(--color-danger);
  color: #FFFFFF;
}

/* Light Theme Code Blocks */
body.light-theme code,
body.light-theme pre {
  background-color: #F1F5F9;
  color: var(--color-text-primary);
  border: 1px solid var(--color-gray-300);
}

/* Light Theme Links */
body.light-theme a {
  color: var(--color-primary);
}

body.light-theme a:hover {
  color: var(--color-primary-hover);
}

body.light-theme .text-neon {
  color: var(--color-primary);
}

body.light-theme .text-neon:hover {
  color: var(--color-primary-hover);
  text-shadow: var(--glow-primary);
}

/* Light Theme Borders & Glows */
body.light-theme .border-neon {
  border: 1px solid var(--color-primary);
  box-shadow: var(--glow-primary);
}

body.light-theme .border-neon-secondary {
  border: 1px solid var(--color-secondary);
  box-shadow: var(--glow-secondary);
}

body.light-theme .glow-effect {
  border: 1px solid var(--color-secondary);
  box-shadow: var(--glow-secondary);
}

/* Light Theme Gradient */
body.light-theme .bg-gradient-neon {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.1) 0%, rgba(124, 58, 237, 0.1) 100%);
}

/* Light Theme Tables */
body.light-theme table {
  background-color: #FFFFFF;
  border: 1px solid var(--color-gray-300);
}

body.light-theme table thead {
  background-color: #F1F5F9;
  border-bottom: 2px solid var(--color-primary);
}

body.light-theme table th {
  color: var(--color-text-primary);
  font-weight: 600;
}

body.light-theme table td {
  color: var(--color-text-secondary);
  border-bottom: 1px solid var(--color-gray-300);
}

body.light-theme table tbody tr:hover {
  background-color: rgba(8, 145, 178, 0.05);
}

/* Light Theme Alert/Notice Styles */
body.light-theme .alert,
body.light-theme .notice {
  background-color: rgba(8, 145, 178, 0.1);
  border: 1px solid var(--color-primary);
  color: var(--color-text-primary);
}

body.light-theme .alert-success {
  background-color: rgba(16, 185, 129, 0.1);
  border-color: var(--color-success);
}

body.light-theme .alert-warning {
  background-color: rgba(245, 158, 11, 0.1);
  border-color: var(--color-warning);
}

body.light-theme .alert-danger {
  background-color: rgba(239, 68, 68, 0.1);
  border-color: var(--color-danger);
}

/* Light Theme Scrollbar */
body.light-theme ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

body.light-theme ::-webkit-scrollbar-track {
  background: #F8FAFC;
}

body.light-theme ::-webkit-scrollbar-thumb {
  background: var(--color-gray-300);
  border-radius: 6px;
}

body.light-theme ::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary);
}

/* Light Theme Hero Sections */
body.light-theme .hero,
body.light-theme .news-hero,
body.light-theme .hardware-hero {
  background: linear-gradient(135deg, rgba(8, 145, 178, 0.05) 0%, rgba(124, 58, 237, 0.05) 100%);
}

/* Light Theme Pagination */
body.light-theme .pagination a,
body.light-theme .pagination button {
  background-color: #FFFFFF;
  color: var(--color-text-secondary);
  border: 1px solid var(--color-gray-300);
}

body.light-theme .pagination a:hover,
body.light-theme .pagination button:hover,
body.light-theme .pagination a.active,
body.light-theme .pagination button.active {
  background-color: var(--color-primary);
  color: #FFFFFF;
  border-color: var(--color-primary);
}

/* Light Theme Breadcrumbs */
body.light-theme .breadcrumbs {
  color: var(--color-text-secondary);
}

body.light-theme .breadcrumbs a {
  color: var(--color-primary);
}

body.light-theme .breadcrumbs a:hover {
  color: var(--color-primary-hover);
}

/* Light Theme Modals/Overlays */
body.light-theme .modal,
body.light-theme .dialog {
  background-color: #FFFFFF;
  box-shadow: var(--shadow-lg);
}

body.light-theme .modal-overlay,
body.light-theme .dialog-overlay {
  background-color: rgba(0, 0, 0, 0.5);
}

/* Light Theme Comments/Reviews */
body.light-theme .comment,
body.light-theme .review-text {
  background-color: #F8FAFC;
  border: 1px solid var(--color-gray-300);
  color: var(--color-text-secondary);
}

/* Light Theme Stats/Numbers */
body.light-theme .stat-number,
body.light-theme .counter {
  color: var(--color-primary);
  font-weight: 700;
}

body.light-theme .stat-label {
  color: var(--color-text-secondary);
}

/* Light Theme Tags */
body.light-theme .tag,
body.light-theme .label {
  background-color: rgba(8, 145, 178, 0.1);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
}

body.light-theme .tag:hover {
  background-color: rgba(8, 145, 178, 0.2);
}

/* Light Theme Dividers */
body.light-theme hr,
body.light-theme .divider {
  border-color: var(--color-gray-300);
}

/* Light Theme Code Syntax Highlighting */
body.light-theme .hljs {
  background-color: #F1F5F9;
  color: var(--color-text-primary);
}

body.light-theme .hljs-string {
  color: #059669;
}

body.light-theme .hljs-number {
  color: #EA580C;
}

body.light-theme .hljs-attr {
  color: #0891B2;
}

body.light-theme .hljs-function {
  color: #7C3AED;
}

/* Light Theme Loading States */
body.light-theme .skeleton,
body.light-theme .loading {
  background: linear-gradient(90deg, #F1F5F9 25%, #E2E8F0 50%, #F1F5F9 75%);
  background-size: 200% 100%;
}

/* Light Theme Print Styles */
@media print {
  body.light-theme {
    --color-bg-base: #FFFFFF;
    --color-text-primary: #000000;
  }
}