DARK NEON HERO THEME

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Sora:wght@400;500;600;700;800&display=swap');

/* ===== Dark Neon Hero Tokens ===== */
:root {
  --background: 150 29% 5%;          /* #0A120E surface */
  --foreground: 144 8% 80%;
  --heading: 120 1% 97%;             /* #ECFDF5 bright text */
  --card: 147 52% 9%;                /* #121E18 deep card */
  --card-foreground: 120 1% 97%;
  --popover: 147 52% 9%;
  --popover-foreground: 120 1% 97%;
  --primary: 143 57% 49%;            /* #35C46B green */
  --primary-foreground: 150 29% 5%;
  --secondary: 146 24% 11%;
  --secondary-foreground: 120 1% 97%;
  --muted: 146 24% 11%;
  --muted-foreground: 146 48% 59%;   /* #8BA496 muted text */
  --accent: 146 24% 11%;
  --accent-foreground: 120 1% 97%;
  --destructive: 0 62% 50%;
  --destructive-foreground: 0 0% 100%;
  --border: 147 19% 16%;             /* #1D2E25 */
  --input: 147 17% 20%;
  --ring: 143 57% 49%;
  --radius: 0.625rem;
  --font-heading: 'Sora', ui-sans-serif, system-ui, sans-serif;
  --font-body: 'Inter', ui-sans-serif, system-ui, sans-serif;
}

/* Light variant (optional — used when .dark is absent) */
/* Keep the dark tokens above as the default; toggle .dark on <html>. */

body { background: hsl(var(--background)); color: hsl(var(--foreground)); font-family: var(--font-body); }
h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); color: hsl(var(--heading)); }

/* ===== Glow / Ring Utilities ===== */
.pm-glow {
  background: radial-gradient(circle, rgba(0,212,255,.18) 0, rgba(53,196,107,.11) 30%, rgba(10,18,14,0) 68%);
}
.pm-ring::before,
.pm-ring::after { content:""; position:absolute; border-radius:50%; }
.pm-ring::before { inset:26px; border:1px solid rgba(53,196,107,.15); }
.pm-ring::after { inset:70px; border:1px dashed rgba(0,212,255,.14); }
.pm-fill { animation: pm-fill 1.2s .8s ease-out both, pm-pulse 2.4s 2s ease-in-out infinite; }

/* ===== Floating Toggle ===== */
.pm-toggle-dot { transition: transform .25s; }
.pm-toggle[aria-pressed="false"] .pm-toggle-dot { transform: translateX(24px); }

/* ===== Keyframes ===== */
@keyframes pm-rise { from { opacity:0; transform:translateY(22px); } to { opacity:1; transform:translateY(0); } }
@keyframes pm-fill { from { width:0; } }
@keyframes pm-pulse { 0%,100% { box-shadow:0 0 12px rgba(53,196,107,.45); } 50% { box-shadow:0 0 26px rgba(0,212,255,.8); } }
@keyframes pm-spin { to { transform:rotate(360deg); } }

@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation:none !important; transition:none !important; }
}