/* ==========================================================================
   design-neon.css — Neon / Cyberpunk design language
   Dark base with glowing cyan neon accents (magenta as a secondary
   highlight), sharp near-zero corner radii, glow-based shadows
   (colored blur, not a offset drop shadow) that intensify on hover.
   Always dark — even this design's "light" mode is a dark charcoal
   base rather than a true light theme, since the aesthetic itself is
   inherently dark; the dark/light toggle still does something
   meaningful (charcoal vs. true black, softer vs. more intense glow),
   it just never becomes an actual light page.
   Scoped entirely under [data-design="neon"] so it's inert otherwise
   — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens ("light" = dark charcoal) ----
   Reusing the ink, shadow, and radius tokens means every component
   that already reads them (text, borders, .glass's own box-shadow,
   .demo-badge, .toolbox-list) re-colors and re-shapes automatically —
   only the handful of things below need explicit rules. ---- */
:root[data-design="neon"] {
  --bg-0: #14181f;
  --bg-1: #1a1f29;
  --bg-2: #212733;
  --bg-3: #2a3140;

  --ink-rgb: 220, 240, 245;
  --focus-ring: #00fff2;

  --radius-pill: 6px;
  --radius-card: 6px;
  --radius-card-lg: 8px;
  --radius-sm: 4px;

  --shadow-soft: 0 0 8px rgba(0, 255, 242, 0.25), 0 0 2px rgba(0, 255, 242, 0.4);
  --shadow-lift: 0 0 16px rgba(0, 255, 242, 0.35), 0 0 4px rgba(0, 255, 242, 0.5);
  --shadow-inner-highlight: 0 0 #0000;
}

/* ---- Palette + shadow tokens ("dark" = true black, more intense glow) ---- */
:root[data-design="neon"][data-theme="dark"] {
  --bg-0: #05070a;
  --bg-1: #090c10;
  --bg-2: #0d1117;
  --bg-3: #12161d;

  --ink-rgb: 230, 250, 255;
  --focus-ring: #00fff2;

  --shadow-soft: 0 0 12px rgba(0, 255, 242, 0.4), 0 0 3px rgba(0, 255, 242, 0.6);
  --shadow-lift: 0 0 22px rgba(0, 255, 242, 0.5), 0 0 5px rgba(0, 255, 242, 0.65);
}

[data-design="neon"] .atmosphere {
  display: none;
}

/* ---- Material: flat dark panel, no blur, an explicit neon-cyan
   border — the default glass border tokens (rgba(ink, 0.08-0.2)) are
   far too dim to read as "neon outline" against a near-black surface. ---- */
[data-design="neon"] .glass::before {
  content: none;
}

[data-design="neon"] .glass-ultra,
[data-design="neon"] .glass-floating,
[data-design="neon"] .glass-frosted {
  background: var(--bg-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 1px solid rgba(0, 255, 242, 0.4);
}

/* ---- Buttons: dark fill, neon outline + glow, glow intensifies on
   hover in addition to the existing translateY lift. ---- */
[data-design="neon"] .btn-primary {
  background: var(--bg-3);
  color: var(--focus-ring);
  border: 1px solid var(--focus-ring);
  box-shadow: var(--shadow-soft);
  text-shadow: 0 0 6px rgba(0, 255, 242, 0.6);
}

[data-design="neon"] .btn-primary:hover {
  box-shadow: var(--shadow-lift);
}

[data-design="neon"] .btn-secondary {
  background: var(--bg-3);
  border: 1px solid rgba(var(--ink-rgb), 0.3);
}

/* ---- Hero orb: dark fill with a neon ring + inner glow instead of
   the cyan/peach glass wash. No gloss highlight — doesn't fit the
   flat neon-outline aesthetic. ---- */
[data-design="neon"] .hero-orb.glass {
  background: var(--bg-3);
  border: 2px solid var(--focus-ring);
  box-shadow: var(--shadow-lift), inset 0 0 30px rgba(0, 255, 242, 0.15);
}

[data-design="neon"] .hero-orb__tint {
  background: rgba(0, 255, 242, 0.08);
}

[data-design="neon"] .hero-orb__highlight {
  display: none;
}

/* ---- Project card visual/monogram area: same cyan/peach glass wash
   as the hero orb's tint, invisible against a flat dark panel. A
   neon-bordered block + a glowing cyan monogram reads clearly
   instead. ---- */
[data-design="neon"] .project-card__visual {
  background: var(--bg-2);
  border: 1px solid rgba(0, 255, 242, 0.25);
}

[data-design="neon"] .project-card__monogram {
  color: rgba(0, 255, 242, 0.45);
}

/* ---- Cosmetic surfaces: the badge uses the secondary magenta accent
   for a bit of contrast against the cyan used everywhere else. ---- */
[data-design="neon"] .demo-badge {
  background: transparent;
  border: 1px solid #ff2bd6;
  color: #ff2bd6;
}

[data-design="neon"] .toolbox-list li {
  background: var(--bg-3);
  border: 1px solid rgba(0, 255, 242, 0.25);
}