/* ============================================================
   Klipa — Dark mode
   Activates when html[data-theme="dark"] (set by pre-paint script
   from prefers-color-scheme or a stored manual choice).
   ============================================================ */

/* ---------- Global hardening (applies in both themes) ---------- */

:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
  border-radius: 6px;
}

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

/* ---------- Theme toggle button (shared) ---------- */

.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--border);
  background: transparent;
  border-radius: 999px;
  color: var(--ink-soft);
  cursor: pointer;
  transition: color 160ms ease, background 160ms ease, border-color 160ms ease, transform 160ms ease;
}
.theme-toggle:hover {
  color: var(--primary);
  border-color: rgba(124, 94, 240, 0.30);
  background: rgba(124, 94, 240, 0.08);
  transform: translateY(-1px);
}
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-sun { display: none; }
[data-theme="dark"] .theme-toggle .theme-icon-moon { display: block; }

/* ============================================================
   DARK MODE — variable overrides
   ============================================================ */

:root[data-theme="dark"] {
  /* Surfaces — OLED dark */
  --bg: #0A0F1F;
  --card: #111A2E;
  --card-tint: #15203A;
  --border: rgba(255, 255, 255, 0.08);

  /* Ink — light foreground */
  --ink: #F1F5F9;
  --ink-soft: #CBD5E1;
  --muted: #94A3B8;
  --muted-2: #64748B;

  /* Brand stays purple, slightly brightened for dark contrast */
  --primary: #9D86F5;
  --primary-soft: #B49AF7;
  --primary-deep: #7C5EF0;
  --accent: #22D3EE;
  --accent-2: #38BDF8;

  /* Feature chip palette — brighter for dark */
  --chip-purple: #A78BFA;
  --chip-pink:   #F472B6;
  --chip-coral:  #FB923C;
  --chip-amber:  #FACC15;
  --chip-teal:   #2DD4BF;
  --chip-blue:   #60A5FA;

  /* Gradients — brand purple flow */
  --grad-brand: linear-gradient(135deg, #7C5EF0 0%, #6B6AEF 50%, #5B7CF5 100%);
  --grad-cta:   linear-gradient(135deg, #7C5EF0 0%, #5B4FD0 100%);
  --grad-hero-mesh:
    radial-gradient(at 18% 12%, rgba(124, 94, 240, 0.26) 0px, rgba(124, 94, 240, 0) 55%),
    radial-gradient(at 82% 0%,  rgba(91, 124, 245, 0.22) 0px, rgba(91, 124, 245, 0) 50%),
    radial-gradient(at 0% 55%,  rgba(180, 147, 246, 0.20) 0px, rgba(180, 147, 246, 0) 50%),
    radial-gradient(at 90% 60%, rgba(124, 94, 240, 0.16) 0px, rgba(124, 94, 240, 0) 55%),
    radial-gradient(at 50% 95%, rgba(91, 124, 245, 0.12) 0px, rgba(91, 124, 245, 0) 60%);

  /* Shadows */
  --shadow-sm: 0 2px 8px -2px rgba(0, 0, 0, 0.45);
  --shadow-md: 0 10px 30px -10px rgba(0, 0, 0, 0.55);
  --shadow-lg: 0 22px 60px -18px rgba(0, 0, 0, 0.70);
  --shadow-card: 0 20px 60px -15px rgba(124, 94, 240, 0.28);
  --shadow-glow: 0 0 60px rgba(124, 94, 240, 0.40);

  /* Legacy aliases */
  --text: var(--ink);
  --text-soft: var(--ink-soft);
  --text-muted: var(--muted);
  --line: var(--border);
  --line-strong: rgba(255, 255, 255, 0.14);
  --panel: var(--card);
}

/* ============================================================
   DARK MODE — element overrides
   ============================================================ */

[data-theme="dark"] body { color-scheme: dark; }
[data-theme="dark"] html,
[data-theme="dark"] body { background: var(--bg); color: var(--ink); }

[data-theme="dark"] ::selection { background: rgba(124, 94, 240, 0.35); color: #fff; }

[data-theme="dark"] h1,
[data-theme="dark"] h2,
[data-theme="dark"] h3,
[data-theme="dark"] h4 { color: var(--ink); }

[data-theme="dark"] h1 { text-shadow: 0 0 24px rgba(124, 94, 240, 0.18); }

[data-theme="dark"] .lede,
[data-theme="dark"] .hero-lede,
[data-theme="dark"] .feature-copy p,
[data-theme="dark"] p { color: var(--ink-soft); }

/* Eyebrow */
[data-theme="dark"] .eyebrow {
  background: rgba(124, 94, 240, 0.12);
  border-color: rgba(124, 94, 240, 0.32);
  color: var(--primary-soft);
}
[data-theme="dark"] .eyebrow::before {
  background: var(--primary);
  box-shadow: 0 0 12px rgba(124, 94, 240, 0.80);
}

/* Topbar */
[data-theme="dark"] .topbar.is-scrolled {
  background: rgba(10, 15, 31, 0.78);
  border-bottom-color: var(--border);
}
[data-theme="dark"] body:not(.is-home) .topbar {
  background: rgba(10, 15, 31, 0.88);
  border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .topnav a { color: var(--ink-soft); }
[data-theme="dark"] .topnav a:hover { color: var(--primary); }
[data-theme="dark"] .topnav .nav-beta {
  background: rgba(124, 94, 240, 0.14);
  color: var(--primary-soft);
}
[data-theme="dark"] .topnav .nav-beta::before {
  background: var(--primary);
  box-shadow: 0 0 0 3px rgba(124, 94, 240, 0.25);
}
[data-theme="dark"] .topnav .nav-beta:hover {
  background: rgba(124, 94, 240, 0.22);
  color: #fff;
}

/* Invert dark logo for dark background */
[data-theme="dark"] .brand img {
  filter: brightness(0) invert(1);
  opacity: 0.95;
}

/* Buttons */
[data-theme="dark"] .btn-primary {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 14px 36px -10px rgba(124, 94, 240, 0.55);
}
[data-theme="dark"] .btn-primary:hover { background: var(--primary-soft); }

[data-theme="dark"] .btn-grad {
  background: var(--grad-cta);
  color: #FFFFFF;
  box-shadow: 0 14px 36px -10px rgba(124, 94, 240, 0.55);
}

[data-theme="dark"] .btn-soft {
  background: rgba(124, 94, 240, 0.12);
  color: var(--primary-soft);
  border: 1px solid rgba(124, 94, 240, 0.22);
}
[data-theme="dark"] .btn-soft:hover {
  background: rgba(124, 94, 240, 0.22);
  color: #fff;
  border-color: rgba(124, 94, 240, 0.40);
}

[data-theme="dark"] .btn-pill { background: var(--primary); color: #FFFFFF; }

[data-theme="dark"] .btn-soft .store-glyph { filter: drop-shadow(0 0 8px rgba(124, 94, 240, 0.25)); }
[data-theme="dark"] .btn-store-stack small { opacity: 0.7; color: var(--ink-soft); }
[data-theme="dark"] .btn-store-stack strong { color: var(--ink); }

/* Hero accent text */
[data-theme="dark"] .hero h1 .accent {
  background: var(--grad-brand);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

/* Hero glow + mask */
[data-theme="dark"] .hero-glow {
  background: radial-gradient(closest-side, rgba(124, 94, 240, 0.45), rgba(124, 94, 240, 0) 70%);
}
[data-theme="dark"] .hero::before {
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0) 100%);
          mask-image: linear-gradient(to bottom, #000 0%, #000 60%, rgba(0,0,0,0.4) 85%, rgba(0,0,0,0) 100%);
}

/* Phone bezels */
[data-theme="dark"] .hero-device,
[data-theme="dark"] .phone {
  background: linear-gradient(160deg, #1F2937 0%, #0B1220 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.20),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    inset 0 -1px 0 rgba(0, 0, 0, 0.70),
    0 28px 50px -14px rgba(0, 0, 0, 0.65),
    0 60px 90px -20px rgba(0, 0, 0, 0.55),
    0 0 80px -20px rgba(124, 94, 240, 0.25);
}

[data-theme="dark"] .hero-device-screen {
  background:
    radial-gradient(120% 60% at 50% 0%, rgba(124, 94, 240, 0.30) 0%, rgba(124, 94, 240, 0) 60%),
    linear-gradient(180deg, #0F1A2E 0%, #070B17 100%);
  color: #E2F5EA;
}

[data-theme="dark"] .hero-now {
  background: linear-gradient(180deg, rgba(124, 94, 240, 0.18), rgba(34, 211, 238, 0.08));
  border-color: rgba(255, 255, 255, 0.10);
}

[data-theme="dark"] .hero-now-thumb {
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(255, 255, 255, 0.25), rgba(255, 255, 255, 0) 70%),
    linear-gradient(135deg, #7C5EF0, #5B7CF5);
  box-shadow: 0 6px 14px -6px rgba(124, 94, 240, 0.55);
}

[data-theme="dark"] .phone-glow { background: var(--grad-brand); opacity: 0.40; }

/* Hero floating chips */
[data-theme="dark"] .hero-chip {
  background: linear-gradient(160deg, #15203A 0%, #0B1220 100%);
  color: var(--primary-soft);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.10),
    0 14px 30px -10px rgba(0, 0, 0, 0.60),
    0 0 30px -8px rgba(124, 94, 240, 0.30);
}
[data-theme="dark"] .hero-chip-fast   { color: var(--chip-amber); }
[data-theme="dark"] .hero-chip-custom { color: var(--accent); }
[data-theme="dark"] .hero-chip-easy   { color: var(--primary); }

/* Phone screens */
[data-theme="dark"] .phone-screen {
  background: linear-gradient(180deg, #0F1A2E 0%, #060A14 100%);
  color: #DCEEFB;
}

/* Features section bg + chip + meta */
[data-theme="dark"] .features {
  background: linear-gradient(180deg, transparent 0%, rgba(124, 94, 240, 0.025) 60%, transparent 100%);
}
[data-theme="dark"] .feature-copy .chip {
  background: var(--primary);
  color: #FFFFFF;
  box-shadow: 0 12px 28px -10px rgba(124, 94, 240, 0.55);
}
[data-theme="dark"] .feature-copy .feature-meta { color: var(--muted); }
[data-theme="dark"] .feature-copy .feature-meta span::before { background: var(--primary); }

/* Per-accent chip recoloring for dark */
[data-theme="dark"] .feature[data-accent="purple"] .chip { background: var(--chip-purple); color: #0F0A1F; box-shadow: 0 12px 28px -10px rgba(167, 139, 250, 0.55); }
[data-theme="dark"] .feature[data-accent="pink"]   .chip { background: var(--chip-pink);   color: #1F0A15; box-shadow: 0 12px 28px -10px rgba(244, 114, 182, 0.55); }
[data-theme="dark"] .feature[data-accent="coral"]  .chip { background: var(--chip-coral);  color: #1F0E08; box-shadow: 0 12px 28px -10px rgba(251, 146, 60, 0.55); }
[data-theme="dark"] .feature[data-accent="amber"]  .chip { background: var(--chip-amber);  color: #1F1808; box-shadow: 0 12px 28px -10px rgba(250, 204, 21, 0.55); }
[data-theme="dark"] .feature[data-accent="teal"]   .chip { background: var(--chip-teal);   color: #08201D; box-shadow: 0 12px 28px -10px rgba(45, 212, 191, 0.55); }
[data-theme="dark"] .feature[data-accent="blue"]   .chip { background: var(--chip-blue);   color: #08131F; box-shadow: 0 12px 28px -10px rgba(96, 165, 250, 0.55); }

[data-theme="dark"] .feature[data-accent="purple"] .feature-meta span::before { background: var(--chip-purple); }
[data-theme="dark"] .feature[data-accent="pink"]   .feature-meta span::before { background: var(--chip-pink); }
[data-theme="dark"] .feature[data-accent="coral"]  .feature-meta span::before { background: var(--chip-coral); }
[data-theme="dark"] .feature[data-accent="amber"]  .feature-meta span::before { background: var(--chip-amber); }
[data-theme="dark"] .feature[data-accent="teal"]   .feature-meta span::before { background: var(--chip-teal); }
[data-theme="dark"] .feature[data-accent="blue"]   .feature-meta span::before { background: var(--chip-blue); }

/* TV frame */
[data-theme="dark"] .tv-frame,
[data-theme="dark"] .tv-screen {
  background: linear-gradient(180deg, #0F1A2E 0%, #060A14 100%);
}

/* Footer */
[data-theme="dark"] .footer {
  background: #060A14;
  border-top: 1px solid var(--border);
  color: var(--muted);
}
[data-theme="dark"] .footer h5 { color: var(--ink); }
[data-theme="dark"] .footer a { color: var(--ink-soft); transition: color 160ms ease; }
[data-theme="dark"] .footer a:hover { color: var(--primary); }
[data-theme="dark"] .footer-meta { color: var(--muted-2); }

/* Scene styles — restyle channels/tiles for dark cohesion */
[data-theme="dark"] .channel-tile,
[data-theme="dark"] .tv-tile,
[data-theme="dark"] .mv-cell {
  background: linear-gradient(160deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  color: var(--ink-soft) !important;
}

[data-theme="dark"] .focus-ring {
  box-shadow: 0 0 0 3px rgba(124, 94, 240, 0.85), 0 0 30px rgba(124, 94, 240, 0.55) !important;
  border-color: var(--primary) !important;
}

[data-theme="dark"] .live-tag:not(.pip-window .live-tag),
[data-theme="dark"] .badge {
  background: rgba(124, 94, 240, 0.20) !important;
  color: var(--primary-soft) !important;
  border: 1px solid rgba(124, 94, 240, 0.40) !important;
}