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

[data-theme="dark"] {
  /* Pink Dark theme colors */
  --bg-primary: #130411;
  --bg-secondary: #1f0a1c;
  --bg-card: #2a0f26;
  --bg-hover: #3d1638;

  --text-primary: #fce7f3;
  --text-secondary: #d8b4d4;
  --text-muted: #9d7b9a;

  --border-color: #3d1638;
  --shadow-sm: 0 2px 8px rgba(236, 72, 153, 0.2);
  --shadow-md: 0 4px 12px rgba(236, 72, 153, 0.3);
  --shadow-lg: 0 10px 30px rgba(236, 72, 153, 0.4);
  --shadow-xl: 0 20px 50px rgba(236, 72, 153, 0.5);

  --glow-pink: 0 0 25px rgba(236, 72, 153, 0.5);
  --glow-pink-strong: 0 0 40px rgba(236, 72, 153, 0.7),
    0 0 80px rgba(236, 72, 153, 0.5);
}

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

[data-theme="dark"] body::before {
  background: radial-gradient(
      circle at 30% 50%,
      rgba(236, 72, 153, 0.2) 0%,
      transparent 50%
    ),
    radial-gradient(
      circle at 70% 50%,
      rgba(244, 114, 182, 0.15) 0%,
      transparent 50%
    );
}

[data-theme="dark"] .header {
  background: rgba(42, 15, 38, 0.85);
  backdrop-filter: blur(20px) saturate(180%);
  border-bottom-color: var(--border-color);
  box-shadow: 0 4px 30px rgba(236, 72, 153, 0.2);
}

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

[data-theme="dark"] .search-input {
  background: rgba(42, 15, 38, 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(236, 72, 153, 0.35), var(--glow-pink);
}

[data-theme="dark"] .filter-section {
  background: rgba(42, 15, 38, 0.7);
  backdrop-filter: blur(10px);
  border-bottom-color: var(--border-color);
  box-shadow: 0 4px 20px rgba(236, 72, 153, 0.15);
}

[data-theme="dark"] .filter-tab {
  background: rgba(42, 15, 38, 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(236, 72, 153, 0.3), var(--glow-pink);
}

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

[data-theme="dark"] .site-card {
  background: rgba(42, 15, 38, 0.9);
  backdrop-filter: blur(20px);
  border-color: var(--border-color);
  box-shadow: 0 8px 30px rgba(236, 72, 153, 0.2);
}

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

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

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

[data-theme="dark"] .site-category {
  background: linear-gradient(
    135deg,
    rgba(236, 72, 153, 0.2),
    rgba(244, 114, 182, 0.2)
  );
  border-color: rgba(236, 72, 153, 0.35);
}

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

[data-theme="dark"] .footer {
  background: rgba(42, 15, 38, 0.85);
  backdrop-filter: blur(20px);
  border-top-color: var(--border-color);
  box-shadow: 0 -4px 30px rgba(236, 72, 153, 0.2);
}

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

[data-theme="dark"] .seo-article {
  background: rgba(42, 15, 38, 0.9);
  backdrop-filter: blur(20px);
  border-color: var(--border-color);
  box-shadow: 0 10px 40px rgba(236, 72, 153, 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 - Pink Theme
   ======================================== */

.category-streaming {
  --category-color: #ec4899;
}
.category-social {
  --category-color: #f472b6;
}
.category-productivity {
  --category-color: #db2777;
}
.category-gaming {
  --category-color: #fb7185;
}
.category-education {
  --category-color: #f9a8d4;
}
.category-news {
  --category-color: #be185d;
}
.category-shopping {
  --category-color: #fda4af;
}

.site-card[data-category="streaming"] .site-icon::before {
  background: linear-gradient(135deg, #ec4899, #db2777);
}
.site-card[data-category="social"] .site-icon::before {
  background: linear-gradient(135deg, #f472b6, #ec4899);
}
.site-card[data-category="productivity"] .site-icon::before {
  background: linear-gradient(135deg, #db2777, #be185d);
}
.site-card[data-category="gaming"] .site-icon::before {
  background: linear-gradient(135deg, #fb7185, #f472b6);
}
.site-card[data-category="education"] .site-icon::before {
  background: linear-gradient(135deg, #f9a8d4, #fb7185);
}
.site-card[data-category="news"] .site-icon::before {
  background: linear-gradient(135deg, #be185d, #9f1239);
}
.site-card[data-category="shopping"] .site-icon::before {
  background: linear-gradient(135deg, #fda4af, #fb7185);
}

/* ========================================
   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;
  }
}