/* ========================================
   Dark Theme Styles
   ======================================== */

[data-theme="dark"] {
  /* Light green dark theme colors */
  --bg-primary: #052e16;
  --bg-secondary: #14532d;
  --bg-card: #166534;
  --bg-hover: #15803d;

  --text-primary: #dcfce7;
  --text-secondary: #bbf7d0;
  --text-muted: #86efac;

  --border-color: #15803d;
  --shadow-sm: 0 2px 8px rgba(34, 197, 94, 0.2);
  --shadow-md: 0 4px 12px rgba(34, 197, 94, 0.3);
  --shadow-lg: 0 10px 30px rgba(34, 197, 94, 0.4);
  --shadow-xl: 0 20px 50px rgba(34, 197, 94, 0.5);

  --glow-pink: 0 0 25px rgba(34, 197, 94, 0.5);
  --glow-pink-strong: 0 0 40px rgba(34, 197, 94, 0.7),
    0 0 80px rgba(34, 197, 94, 0.5);
}

[data-theme="dark"] body {
  background: linear-gradient(135deg, #052e16 0%, #14532d 100%);
  background-attachment: fixed;
  color: var(--text-primary);
}

[data-theme="dark"] body::before {
  background: radial-gradient(
      circle at 30% 50%,
      rgba(34, 197, 94, 0.2) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 50%,
      rgba(74, 222, 128, 0.15) 0%,
      transparent 50%
    );
}

[data-theme="dark"] .header {
  background: rgba(22, 101, 52, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--border-color);
  box-shadow: 0 4px 30px rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .search-section {
  background: transparent;
}

[data-theme="dark"] .search-input {
  background: rgba(22, 101, 52, 0.9);
  backdrop-filter: blur(10px);
  border-color: var(--border-color);
  color: var(--text-primary);
}

[data-theme="dark"] .search-input:focus {
  border-color: var(--accent-primary);
  box-shadow: 0 8px 40px rgba(34, 197, 94, 0.35), var(--glow-pink);
}

[data-theme="dark"] .filter-section {
  background: rgba(22, 101, 52, 0.7);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(34, 197, 94, 0.15);
}

[data-theme="dark"] .filter-tab {
  background: rgba(22, 101, 52, 0.9);
  backdrop-filter: blur(10px);
  border-color: var(--border-color);
  color: var(--text-secondary);
}

[data-theme="dark"] .filter-tab:hover {
  border-color: var(--accent-primary);
  color: var(--accent-primary);
  box-shadow: 0 8px 20px rgba(34, 197, 94, 0.3), var(--glow-pink);
}

[data-theme="dark"] .stat-item {
  background: rgba(22, 101, 52, 0.8);
  backdrop-filter: blur(10px);
  border-color: var(--border-color);
}

[data-theme="dark"] .site-card {
  background: rgba(22, 101, 52, 0.9);
  backdrop-filter: blur(20px);
  border-color: var(--border-color);
  box-shadow: 0 8px 30px rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .site-card:hover {
  border-color: var(--accent-primary);
  box-shadow: 0 20px 50px rgba(34, 197, 94, 0.4), var(--glow-pink);
}

[data-theme="dark"] .site-icon {
  background: var(--bg-secondary);
  box-shadow: 0 10px 30px rgba(34, 197, 94, 0.4), var(--glow-pink);
}

[data-theme="dark"] .site-card:hover .site-icon {
  box-shadow: 0 15px 40px rgba(34, 197, 94, 0.6), var(--glow-pink-strong);
}

[data-theme="dark"] .site-category {
  background: linear-gradient(
    135deg,
    rgba(34, 197, 94, 0.2),
    rgba(74, 222, 128, 0.2)
  );
  border-color: rgba(34, 197, 94, 0.35);
}

[data-theme="dark"] .site-footer {
  border-top-color: var(--border-color);
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(34, 197, 94, 0.08) 100%
  );
}

[data-theme="dark"] .footer {
  background: rgba(22, 101, 52, 0.85);
  backdrop-filter: blur(20px);
  border-top-color: var(--border-color);
  box-shadow: 0 -4px 30px rgba(34, 197, 94, 0.2);
}

[data-theme="dark"] .search-clear:hover {
  background: var(--bg-hover);
}

[data-theme="dark"] .seo-article {
  background: rgba(22, 101, 52, 0.9);
  backdrop-filter: blur(20px);
  border-color: var(--border-color);
  box-shadow: 0 10px 40px rgba(34, 197, 94, 0.25);
}

/* ========================================
   Theme Transition Animation
   ======================================== */

body,
.header,
.search-section,
.filter-section,
.site-card,
.filter-tab,
.stat-item,
.search-input,
.footer {
  transition: background-color var(--transition-base),
    border-color var(--transition-base), color var(--transition-base);
}

/* ========================================
   Additional Dark Mode Enhancements
   ======================================== */

[data-theme="dark"] .filter-tabs::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--bg-secondary);
}

[data-theme="dark"] .skeleton {
  background: linear-gradient(
    90deg,
    rgba(42, 15, 38, 0.8) 25%,
    rgba(61, 22, 56, 0.8) 50%,
    rgba(42, 15, 38, 0.8) 75%
  );
  background-size: 200% 100%;
}

/* ========================================
   Custom Color Schemes for Categories - Green Theme
   ======================================== */

.category-streaming {
  --category-color: #22c55e;
}
.category-social {
  --category-color: #4ade80;
}
.category-productivity {
  --category-color: #16a34a;
}
.category-gaming {
  --category-color: #86efac;
}
.category-education {
  --category-color: #bbf7d0;
}
.category-news {
  --category-color: #15803d;
}
.category-shopping {
  --category-color: #a7f3d0;
}

.site-card[data-category="streaming"] .site-icon::before {
  background: linear-gradient(135deg, #22c55e, #16a34a);
}
.site-card[data-category="social"] .site-icon::before {
  background: linear-gradient(135deg, #4ade80, #22c55e);
}
.site-card[data-category="productivity"] .site-icon::before {
  background: linear-gradient(135deg, #16a34a, #15803d);
}
.site-card[data-category="gaming"] .site-icon::before {
  background: linear-gradient(135deg, #86efac, #4ade80);
}
.site-card[data-category="education"] .site-icon::before {
  background: linear-gradient(135deg, #bbf7d0, #86efac);
}
.site-card[data-category="news"] .site-icon::before {
  background: linear-gradient(135deg, #15803d, #14532d);
}
.site-card[data-category="shopping"] .site-icon::before {
  background: linear-gradient(135deg, #a7f3d0, #86efac);
}

/* ========================================
   Print Styles
   ======================================== */

@media print {
  .theme-toggle,
  .search-section,
  .filter-section {
    display: none;
  }

  .site-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }
}

/* ========================================
   Reduced Motion
   ======================================== */

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