/* Dark mode tokens (works with any theme)
   Applied when html[data-mode="dark"] is set. */
html[data-mode="dark"]{
  --bg-body:#0f1116;
  --text-main:rgba(255,255,255,0.92);

  --surface-1:#171a22;
  --surface-2:rgba(23,26,34,0.82);
  --border-soft:rgba(255,255,255,0.08);

  --soft-gray:#12141a;

  --text-muted:rgba(255,255,255,0.74);
  --text-faint:rgba(255,255,255,0.62);

  --shadow-soft:0 20px 60px rgba(0,0,0,0.35);
  --shadow-subtle:0 12px 28px rgba(0,0,0,0.28);
}

html[data-mode="dark"] .pricing-card{ background-color: rgba(255,255,255,0.05); }
html[data-mode="dark"] .card-icon{ background-color: rgba(255,255,255,0.06); }
html[data-mode="dark"] .btn-outline{ border-color: rgba(255,255,255,0.22); color: rgba(255,255,255,0.88); }
html[data-mode="dark"] .footer-nav a{ color: rgba(255,255,255,0.70); }
html[data-mode="dark"] .footer-nav a:hover{ color: rgba(255,255,255,0.92); }