/* ================================================================
   KITOTOOL — Dark Mode (Premium Modern Design v2.1)
   ================================================================ */

[data-theme="dark"] {
  /* Backgrounds */
  --color-bg: #0f172a;
  --color-bg-secondary: #1e293b;
  --color-bg-tertiary: #334155;
  --color-bg-elevated: #1e293b;
  --color-surface: #1e293b;

  /* Text */
  --color-text: #f1f5f9;
  --color-text-secondary: #94a3b8;
  --color-text-muted: #64748b;
  --color-text-inverse: #0f172a;

  /* Borders */
  --color-border: rgba(255, 255, 255, 0.08);
  --color-border-hover: rgba(255, 255, 255, 0.15);
  --color-border-strong: rgba(255, 255, 255, 0.12);

  /* Shadows — inverted for dark mode */
  --shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-card: 0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.2), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.06);
  --shadow-glow: 0 0 0 1px rgba(99, 102, 241, 0.4), 0 8px 24px -4px rgba(99, 102, 241, 0.3);
  --shadow-glow-sm: 0 0 0 1px rgba(99, 102, 241, 0.3), 0 4px 12px -2px rgba(99, 102, 241, 0.2);
  --shadow-focus: 0 0 0 3px rgba(99, 102, 241, 0.25);
  --shadow-focus-ring: 0 0 0 2px var(--color-bg), 0 0 0 4px var(--color-primary);

  /* Legacy mapped */
  --shadow-xs: var(--shadow-subtle);
  --shadow-sm: var(--shadow-card);
  --shadow-md: var(--shadow-lg);
  --shadow-lg: var(--shadow-lg);
  --shadow-xl: var(--shadow-xl);
}

[data-theme="dark"] body {
  background: var(--color-bg);
  color: var(--color-text);
}

[data-theme="dark"] .tool-card {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .tool-card:hover {
  background: var(--color-bg-tertiary);
}

[data-theme="dark"] .category-card {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .why-card {
    background: var(--color-bg-secondary);
}

[data-theme="dark"] .benefit-card {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .cta-box {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .faq-item {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .modal {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .panel {
  background: var(--color-bg-secondary);
}

[data-theme="dark"] .panel-header {
  background: var(--color-bg-tertiary);
}

/* Badge overrides */
[data-theme="dark"] .badge--ai {
  background: rgba(99, 102, 241, 0.15);
  color: #818cf8;
}

[data-theme="dark"] .badge--free {
  background: rgba(5, 150, 105, 0.15);
  color: #34d399;
}

[data-theme="dark"] .badge--popular {
  background: rgba(217, 119, 6, 0.15);
  color: #fbbf24;
}

/* Gradient text */
[data-theme="dark"] .gradient-text,
[data-theme="dark"] .hero__gradient {
  background: linear-gradient(135deg, #818cf8, #a78bfa, #22d3ee);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Hero gradient */
[data-theme="dark"] .hero::before {
  background: radial-gradient(ellipse at center, rgba(99, 102, 241, 0.06) 0%, transparent 70%);
}

/* Scrollbar */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

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

[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--color-border-strong);
  border-radius: var(--radius-full);
}

[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-muted);
}

/* Selection */
[data-theme="dark"] ::selection {
  background: rgba(99, 102, 241, 0.3);
  color: #ffffff;
}

/* Toast */
[data-theme="dark"] .toast {
  background: var(--color-bg-secondary);
  border-color: var(--color-border);
  color: var(--color-text);
}

/* Light mode explicit */
[data-theme="light"] {
  color-scheme: light;
}

/* Theme transition */
.theme-transition,
.theme-transition * {
  transition: background-color 200ms ease,
              border-color 200ms ease,
              color 200ms ease,
              box-shadow 200ms ease !important;
}

/* ===== DARK MODE — Vercel/Geist v3.0 ===== */

/* Hero dark */
[data-theme="dark"] .hero {
    background: #0f172a;
}
[data-theme="dark"] .hero__title {
    color: #f1f5f9;
}
[data-theme="dark"] .hero__gradient {
    background: linear-gradient(135deg, #818cf8, #a78bfa, #22d3ee);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
[data-theme="dark"] .hero__tagline {
    color: #94a3b8;
}
[data-theme="dark"] .hero__stats strong {
    color: #f1f5f9;
}
[data-theme="dark"] .hero__stats {
    color: #64748b;
}
[data-theme="dark"] .hero::before {
    background:
        radial-gradient(ellipse 80% 60% at 50% 30%, rgba(99,102,241,0.08) 0%, transparent 60%),
        radial-gradient(ellipse 60% 40% at 30% 70%, rgba(124,58,237,0.05) 0%, transparent 50%);
}

/* Section dark */
[data-theme="dark"] .section__title {
    color: #f1f5f9;
}
[data-theme="dark"] .section__subtitle {
    color: #94a3b8;
}
[data-theme="dark"] .section--ai,
[data-theme="dark"] .section--why {
    background: #0f172a;
    border-color: rgba(255,255,255,0.06);
}
[data-theme="dark"] .section--categories,
[data-theme="dark"] .section--cta {
    background: #0f172a;
}

/* Tool card dark */
[data-theme="dark"] .tool-card {
    background: #1e293b;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .tool-card:hover {
    background: #334155;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 8px -4px rgba(0,0,0,0.4);
}
[data-theme="dark"] .tool-card__icon {
    background: #334155;
}
[data-theme="dark"] .tool-card:hover .tool-card__icon {
    background: rgba(99,102,241,0.15);
}
[data-theme="dark"] .tool-card__name {
    color: #f1f5f9;
}
[data-theme="dark"] .tool-card__desc {
    color: #94a3b8;
}
[data-theme="dark"] .tool-card::before {
    background: linear-gradient(90deg, #818cf8, #a78bfa);
}

/* Category card dark */
[data-theme="dark"] .category-card {
    background: #1e293b;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .category-card:hover {
    background: #334155;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 8px -4px rgba(0,0,0,0.4);
}
[data-theme="dark"] .category-card__icon .feature-icon,
[data-theme="dark"] .category-card__icon img[src$=".svg"] {
    filter: brightness(0) invert(0.5);
}
[data-theme="dark"] .category-card:hover .category-card__icon .feature-icon,
[data-theme="dark"] .category-card:hover .category-card__icon img[src$=".svg"] {
    filter: brightness(0) invert(1);
}
[data-theme="dark"] .category-card__name {
    color: #f1f5f9;
}
[data-theme="dark"] .category-card__count {
    color: #64748b;
}
[data-theme="dark"] .category-card__arrow {
    color: #475569;
}
[data-theme="dark"] .category-card:hover .category-card__arrow {
    color: #818cf8;
}

/* Why card dark */
[data-theme="dark"] .why-card {
    background: #1e293b;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.08), 0 2px 2px rgba(0,0,0,0.3);
}
[data-theme="dark"] .why-card:hover {
    background: #334155;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 8px -4px rgba(0,0,0,0.4);
}
[data-theme="dark"] .why-card h3 {
    color: #f1f5f9;
}
[data-theme="dark"] .why-card p {
    color: #94a3b8;
}

/* Tabs dark */
[data-theme="dark"] .tool-tabs {
    background: #1e293b;
}
[data-theme="dark"] .tab {
    color: #94a3b8;
}
[data-theme="dark"] .tab:hover {
    color: #f1f5f9;
}
[data-theme="dark"] .tab--active {
    background: #ffffff;
    color: #0f172a;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* CTA dark */
[data-theme="dark"] .cta-box {
    background: #1e293b;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1), 0 8px 8px -4px rgba(0,0,0,0.4);
}
[data-theme="dark"] .cta-box h2 {
    color: #ffffff;
}
[data-theme="dark"] .cta-box p {
    color: rgba(255,255,255,0.65);
}
[data-theme="dark"] .cta-box::before {
    background: radial-gradient(ellipse at center, rgba(129,140,248,0.08) 0%, transparent 60%);
}

/* Button dark */
[data-theme="dark"] .btn--primary {
    background: #f1f5f9;
    color: #0f172a;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.1);
}
[data-theme="dark"] .btn--primary:hover {
    background: #ffffff;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15), 0 2px 6px rgba(0,0,0,0.2);
}
[data-theme="dark"] .btn--outline {
    color: #f1f5f9;
    box-shadow: 0 0 0 1px rgba(255,255,255,0.15);
}
[data-theme="dark"] .btn--outline:hover {
    background: rgba(255,255,255,0.05);
    color: #f1f5f9;
}

/* Badge dark */
[data-theme="dark"] .badge {
    background: rgba(255,255,255,0.08);
    color: #94a3b8;
}
[data-theme="dark"] .badge--ai {
    background: rgba(99,102,241,0.15);
    color: #818cf8;
}

/* Toast dark */
[data-theme="dark"] .toast {
    background: #1e293b;
    border-color: rgba(255,255,255,0.08);
    color: #f1f5f9;
}

/* Scrollbar dark */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #1e293b;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #475569;
  border-radius: 9999px;
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #64748b;
}

/* Selection dark */
[data-theme="dark"] ::selection {
  background: rgba(99,102,241,0.3);
  color: #ffffff;
}

/* ── Header dark mode scroll state ── */
[data-theme="dark"] .site-header.is-scrolled {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.04);
}

@media (max-width: 1180px) {
  [data-theme="dark"] .site-header.is-scrolled {
    background: var(--color-bg);
    border-bottom-color: var(--color-border);
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.22);
  }
}

/* ── Header dark mode logo hover ── */
[data-theme="dark"] .site-header__logo:hover .site-header__logo-icon {
  filter: drop-shadow(0 2px 12px rgba(129, 140, 248, 0.45));
}