/* =========================
   Dark Premium (Front) - Scoped
   Works only when:
   html[data-theme="dark"] OR (auto + OS dark)
========================= */

html[data-theme="dark"]{ color-scheme: dark; }
@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{ color-scheme: dark; }
}

/* Theme tokens (override inline vars safely) */
html[data-theme="dark"]{
  --bg:#0b1120 !important;
  --text:#e2e8f0 !important;

  --aqua:#22d3ee;
  --mint:#34d399;
  --accent:linear-gradient(135deg,var(--aqua),var(--mint));

  /* Optional: keep site primary as-is if you want.
     If you WANT premium accent always, keep these:
  */
  --primary:#22d3ee !important;
  --primary-soft: rgba(34,211,238,.12) !important;
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"]{
    --bg:#0b1120 !important;
    --text:#e2e8f0 !important;

    --aqua:#22d3ee;
    --mint:#34d399;
    --accent:linear-gradient(135deg,var(--aqua),var(--mint));

    --primary:#22d3ee !important;
    --primary-soft: rgba(34,211,238,.12) !important;
  }
}

/* Body */
html[data-theme="dark"] body{
  background: var(--bg) !important;
  color: var(--text) !important;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] body{
    background: var(--bg) !important;
    color: var(--text) !important;
  }
}

/* Header / Nav */
html[data-theme="dark"] .header,
html[data-theme="dark"] nav,
html[data-theme="dark"] .navbar{
  background: rgba(15,23,42,.55) !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
  backdrop-filter: blur(12px);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .header,
  html[data-theme="auto"] nav,
  html[data-theme="auto"] .navbar{
    background: rgba(15,23,42,.55) !important;
    border-bottom: 1px solid rgba(255,255,255,.08) !important;
    backdrop-filter: blur(12px);
  }
}

/* Links */
html[data-theme="dark"] a{ color: var(--text) !important; }
html[data-theme="dark"] a:hover{ color: var(--aqua) !important; }
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] a{ color: var(--text) !important; }
  html[data-theme="auto"] a:hover{ color: var(--aqua) !important; }
}

/* Hero background */
html[data-theme="dark"] .hero{
  background:
    radial-gradient(900px 600px at 80% 20%, rgba(34,211,238,.25), transparent 45%),
    radial-gradient(900px 600px at 10% 80%, rgba(52,211,153,.18), transparent 45%),
    linear-gradient(135deg,#0b1120,#0f172a 60%) !important;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .hero{
    background:
      radial-gradient(900px 600px at 80% 20%, rgba(34,211,238,.25), transparent 45%),
      radial-gradient(900px 600px at 10% 80%, rgba(52,211,153,.18), transparent 45%),
      linear-gradient(135deg,#0b1120,#0f172a 60%) !important;
  }
}

/* Headings */
html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3{ color:#fff !important; }
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] h1,
  html[data-theme="auto"] h2,
  html[data-theme="auto"] h3{ color:#fff !important; }
}

/* Paragraphs */
html[data-theme="dark"] p,
html[data-theme="dark"] .lead{ color: rgba(226,232,240,.75) !important; }
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] p,
  html[data-theme="auto"] .lead{ color: rgba(226,232,240,.75) !important; }
}

/* Cards */
html[data-theme="dark"] .card{
  background: rgba(15,23,42,.55) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(12px);
  box-shadow: 0 18px 60px rgba(0,0,0,.28);
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .card{
    background: rgba(15,23,42,.55) !important;
    border: 1px solid rgba(255,255,255,.10) !important;
    backdrop-filter: blur(12px);
    box-shadow: 0 18px 60px rgba(0,0,0,.28);
  }
}

/* Buttons */
html[data-theme="dark"] .btn.primary{
  background: var(--accent) !important;
  border: none !important;
  color: #06121a !important;
  font-weight: 800;
  box-shadow: 0 16px 45px rgba(52,211,153,.22);
}
html[data-theme="dark"] .btn.primary:hover{
  transform: translateY(-3px);
  box-shadow: 0 22px 60px rgba(34,211,238,.22);
}
html[data-theme="dark"] .btn.outline{
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.20) !important;
  color: var(--text) !important;
}
html[data-theme="dark"] .btn.outline:hover{
  border-color: rgba(34,211,238,.45) !important;
  background: rgba(255,255,255,.04) !important;
  transform: translateY(-2px);
}

@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .btn.primary{
    background: var(--accent) !important;
    border: none !important;
    color: #06121a !important;
    font-weight: 800;
    box-shadow: 0 16px 45px rgba(52,211,153,.22);
  }
  html[data-theme="auto"] .btn.primary:hover{
    transform: translateY(-3px);
    box-shadow: 0 22px 60px rgba(34,211,238,.22);
  }
  html[data-theme="auto"] .btn.outline{
    background: transparent !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    color: var(--text) !important;
  }
  html[data-theme="auto"] .btn.outline:hover{
    border-color: rgba(34,211,238,.45) !important;
    background: rgba(255,255,255,.04) !important;
    transform: translateY(-2px);
  }
}

/* Footer */
html[data-theme="dark"] .footer{
  background: rgba(15,23,42,.60) !important;
  border-top: 1px solid rgba(255,255,255,.08) !important;
  color: rgba(226,232,240,.70) !important;
}
@media (prefers-color-scheme: dark){
  html[data-theme="auto"] .footer{
    background: rgba(15,23,42,.60) !important;
    border-top: 1px solid rgba(255,255,255,.08) !important;
    color: rgba(226,232,240,.70) !important;
  }
}