:root {
  --primary: 152 58% 38%;
  --primary-foreground: 0 0% 100%;
}

body[data-theme="dark"] {
  --background: 226 46% 9%;
  --foreground: 220 35% 92%;
  --card: 225 35% 12%;
  --card-foreground: 220 35% 92%;
  --muted-token: 225 30% 14%;
  --muted-foreground: 219 18% 70%;
  --border: 223 28% 20%;
  --input: 223 28% 20%;
  --primary: 152 58% 38%;
  --primary-foreground: 0 0% 100%;
  --ring: 210 90% 60%;

  --bg: hsl(var(--background));
  --bg-soft: hsl(var(--muted-token));
  --text: hsl(var(--foreground));
  --muted: hsl(var(--muted-foreground));
  --line: hsl(var(--border));

  --nav-bg: rgba(8, 12, 26, 0.92);
  --nav-border: rgba(111, 127, 177, 0.15);
  --nav-text: rgba(226, 232, 255, 0.86);
  --nav-text-strong: #ffffff;
  --section-title: #f2f5ff;
  --footer-text: rgba(185, 196, 230, 0.8);
  --card-bg: rgba(12, 18, 38, 0.72);
}

body[data-theme="dark"] .card,
body[data-theme="dark"] .info-card,
body[data-theme="dark"] .mod-card,
body[data-theme="dark"] .team-card,
body[data-theme="dark"] .feature-box,
body[data-theme="dark"] .waline-wrap,
body[data-theme="dark"] .rule-modal,
body[data-theme="dark"] .search-modal,
body[data-theme="dark"] .iframe-container,
body[data-theme="dark"] .modal,
body[data-theme="dark"] .panel {
  background: var(--card-bg);
  color: var(--text);
  border-color: hsl(var(--border));
}

body[data-theme="dark"] .section-title,
body[data-theme="dark"] .hero-title {
  color: var(--section-title);
}

body[data-theme="dark"] .section-subtitle,
body[data-theme="dark"] .hero-subtitle,
body[data-theme="dark"] .card p,
body[data-theme="dark"] .mod-desc,
body[data-theme="dark"] .info-card p,
body[data-theme="dark"] .review-text {
  color: var(--muted);
}