/* Light theme variables */
[data-theme="light"] {
  --bg:       #fafafa;
  --surface:  #ffffff;
  --surface2: #f5f5f5;
  --surface3: #eeeeee;
  --border:   rgba(0,0,0,.06);
  --border2:  rgba(0,0,0,.10);
  --red:      #d63031;
  --red2:     #e74c3c;
  --red-bg:   rgba(214,48,49,.06);
  --red-glow: rgba(214,48,49,.03);
  --amber:    #f39c12;
  --amber-bg: rgba(243,156,18,.06);
  --txt:      #1a1a1a;
  --txt2:     #5a5a5a;
  --txt3:     #999999;
}

/* Light theme body */
[data-theme="light"] body {
  background: var(--bg);
  color: var(--txt);
}

[data-theme="light"] body::before {
  background: radial-gradient(ellipse 60% 40% at 50% -5%, rgba(214,48,49,.02) 0%, transparent 60%);
  opacity: 0.5;
}

[data-theme="light"] .hero-bg {
  background:
    linear-gradient(180deg, transparent 0%, rgba(255,255,255,.8) 100%),
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(214,48,49,.03) 0%, transparent 50%),
    linear-gradient(90deg, transparent 48%, rgba(0,0,0,.01) 50%, transparent 52%),
    linear-gradient(0deg, transparent 48%, rgba(0,0,0,.01) 50%, transparent 52%);
  opacity: .3;
}

[data-theme="light"] .search-box {
  background: rgba(255,255,255,.98);
  border: 1px solid var(--border2);
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
}

[data-theme="light"] .search-box:focus-within {
  box-shadow: 0 0 0 3px rgba(214,48,49,.08), 0 4px 16px rgba(0,0,0,.08);
}

[data-theme="light"] .site-nav {
  background: rgba(255,255,255,.98);
  border-bottom: 1px solid var(--border);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}

[data-theme="light"] .logo {
  text-shadow: none;
}

[data-theme="light"] .logo span {
  color: var(--red);
}

[data-theme="light"] .ac-dropdown {
  background: #ffffff;
  box-shadow: 0 12px 32px rgba(0,0,0,.15), inset 0 1px 0 rgba(255,255,255,.8);
}

[data-theme="light"] .result-card:hover {
  background: rgba(0,0,0,.02);
}

[data-theme="light"] .shimmer {
  background: linear-gradient(90deg, var(--surface) 25%, var(--surface3) 50%, var(--surface) 75%);
}

/* Theme toggle button - minimal */
/* Theme toggle handled by nav-icon-btn styles */
.theme-toggle:hover {
  color: var(--txt2);
  opacity:1;
}

.theme-icon {
  display: block;
}

/* Keyboard navigation highlight */
.keyboard-selected {
  outline: 2px solid var(--red) !important;
  outline-offset: 2px;
  background: var(--red-bg) !important;
}

/* Loading spinner enhancement */
@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-spinner {
  display: inline-block;
  width: 16px;
  height: 16px;
  border: 2px solid var(--border);
  border-top-color: var(--red);
  border-radius: 50%;
  animation: spin .6s linear infinite;
}

/* Improved responsive design */
@media (max-width: 768px) {
  .nav-links {
    flex-wrap: wrap;
    gap: 4px;
  }
  
  .nav-link {
    font-size: 11px;
    padding: 4px 8px;
  }
  
  .theme-toggle {
    padding: 4px 6px;
  }
  
  .search-hint {
    font-size: 10px;
  }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Focus visible for keyboard navigation */
*:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible {
  outline: 2px solid var(--red);
  outline-offset: 2px;
}


/* Modern Header - Light Theme - Minimal Google-style */
[data-theme="light"] .site-nav {
  background: transparent;
  border-bottom: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

[data-theme="light"] .nav-link {
  color: rgba(0,0,0,.55);
  opacity:0.85;
}

[data-theme="light"] .nav-link:hover {
  color: rgba(0,0,0,.87);
  opacity:1;
  background: transparent;
  text-decoration:underline;
}

[data-theme="light"] .nav-link.active {
  color: rgba(0,0,0,.87);
  background: transparent;
  opacity:1;
}

[data-theme="light"] .theme-toggle {
  background: transparent;
  border: none;
  color: rgba(0,0,0,.55);
  opacity:0.85;
}

[data-theme="light"] .theme-toggle:hover {
  background: transparent;
  color: rgba(0,0,0,.87);
  opacity:1;
}

/* Customization Panel - Light Theme */
[data-theme="light"] .customize-panel {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 8px 32px rgba(0,0,0,.12);
}

[data-theme="light"] .customize-toggle {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 4px 16px rgba(0,0,0,.1);
}

[data-theme="light"] .customize-toggle:hover {
  background: rgba(255,255,255,1);
  box-shadow: 0 6px 20px rgba(0,0,0,.15);
}

[data-theme="light"] .customize-slider {
  background: var(--surface2);
}

[data-theme="light"] .customize-toggle-switch {
  background: var(--surface2);
}

[data-theme="light"] .color-swatch {
  box-shadow: 0 2px 4px rgba(0,0,0,.08);
}

[data-theme="light"] .color-swatch:hover {
  box-shadow: 0 4px 8px rgba(0,0,0,.15);
}

/* Pills - Light Theme */
[data-theme="light"] .pill {
  background: var(--surface);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.03);
}

[data-theme="light"] .pill:hover {
  background: var(--surface2);
  border-color: rgba(0,0,0,.12);
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
}

[data-theme="light"] .pill.active-tab {
  background: var(--amber-bg);
  border-color: rgba(243,156,18,.25);
  box-shadow: 0 0 0 1px rgba(243,156,18,.06), 0 2px 6px rgba(243,156,18,.12);
}

/* Search Box - Light Theme Enhanced */
[data-theme="light"] .search-box {
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 2px 8px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.02);
}

[data-theme="light"] .search-box:hover {
  border-color: rgba(214,48,49,.15);
  box-shadow: 0 4px 12px rgba(0,0,0,.06), 0 2px 4px rgba(0,0,0,.03);
}

[data-theme="light"] .search-box:focus-within {
  border-color: var(--red);
  box-shadow: 0 0 0 3px rgba(214,48,49,.06), 0 6px 20px rgba(0,0,0,.08);
}

/* Search Button - Light Theme */
[data-theme="light"] .search-go {
  box-shadow: 0 2px 8px rgba(214,48,49,.25), 0 1px 4px rgba(214,48,49,.15);
}

[data-theme="light"] .search-go:hover {
  box-shadow: 0 4px 16px rgba(214,48,49,.35), 0 2px 8px rgba(214,48,49,.2);
}

/* Autocomplete - Light Theme */
[data-theme="light"] .ac-dropdown {
  background: rgba(255,255,255,.98);
  border-color: rgba(0,0,0,.08);
  box-shadow: 0 8px 24px rgba(0,0,0,.12);
}

[data-theme="light"] .ac-row:hover,
[data-theme="light"] .ac-row.act {
  background: rgba(0,0,0,.02);
}

[data-theme="light"] .ac-item:hover,
[data-theme="light"] .ac-item.act {
  background: rgba(0,0,0,.02);
}