/* ==========================================================================
   design-aurora.css — Aurora / Gradient Mesh design language
   Modern SaaS landing-page look (Stripe/Linear/Vercel-style): a soft
   blurred color-mesh gradient painted on the page background via
   layered radial-gradients (CSS-only, no image asset), with flat
   opaque cards floating on top — the opposite of Glassmorphism's
   translucent panels, since here the *background* carries the color
   and the *surfaces* stay clean and solid.
   Scoped entirely under [data-design="aurora"] so it's inert
   otherwise — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens (light) — near-white base, vivid
   purple accent. 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="aurora"] {
  --bg-0: #eeeef7;
  --bg-1: #f7f8fc;
  --bg-2: #f0f1fa;
  --bg-3: #ffffff;

  --ink-rgb: 23, 23, 35;
  --focus-ring: #7c3aed;

  --radius-pill: 999px;
  --radius-card: 20px;
  --radius-card-lg: 28px;
  --radius-sm: 14px;

  --shadow-soft: 0 8px 24px -8px rgba(23, 23, 35, 0.12);
  --shadow-lift: 0 16px 40px -12px rgba(23, 23, 35, 0.18);
  --shadow-inner-highlight: 0 0 #0000;
}

/* ---- Palette + shadow tokens (dark) — deep night-sky base, a
   lighter purple for contrast, a more saturated/glowing mesh below. ---- */
:root[data-design="aurora"][data-theme="dark"] {
  --bg-0: #0a0a14;
  --bg-1: #0d0d1a;
  --bg-2: #121220;
  --bg-3: #181830;

  --ink-rgb: 230, 230, 245;
  --focus-ring: #a78bfa;

  --shadow-soft: 0 8px 24px -8px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 16px 40px -12px rgba(0, 0, 0, 0.5);
}

/* ---- The mesh itself — three large soft-edged color blobs. Dark
   mode uses higher-alpha, more saturated stops for a glowing aurora-
   at-night feel rather than just a dimmer version of the light mesh.
   Atmosphere (orbs/grain/cursor light) is hidden below since it's a
   separate, glass-specific effect. ---- */
[data-design="aurora"] body {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(124, 58, 237, 0.18), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(236, 72, 153, 0.16), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(56, 189, 248, 0.16), transparent 50%);
}

[data-design="aurora"][data-theme="dark"] body {
  background-image:
    radial-gradient(circle at 15% 20%, rgba(167, 139, 250, 0.28), transparent 45%),
    radial-gradient(circle at 85% 15%, rgba(244, 114, 182, 0.24), transparent 45%),
    radial-gradient(circle at 50% 90%, rgba(56, 189, 248, 0.24), transparent 50%);
}

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

/* ---- Material: flat opaque card, no blur, no border — separation
   from the vivid mesh behind it comes from a soft shadow instead. ---- */
[data-design="aurora"] .glass::before {
  content: none;
}

[data-design="aurora"] .glass-ultra,
[data-design="aurora"] .glass-floating,
[data-design="aurora"] .glass-frosted {
  background: var(--bg-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
}

[data-design="aurora"] .glass-interactive:hover,
[data-design="aurora"] .glass-interactive:focus-visible {
  box-shadow: var(--shadow-lift);
}

/* ---- Buttons: solid purple pill with a soft shadow. ---- */
[data-design="aurora"] .btn-primary {
  background: var(--focus-ring);
  color: #ffffff;
  border: none;
  box-shadow: var(--shadow-soft);
}

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

/* ---- Hero orb: kept circular, flat solid surface with a soft
   purple/pink wash instead of the cyan/peach glass tint, no glass
   gloss highlight. ---- */
[data-design="aurora"] .hero-orb.glass {
  background: var(--bg-3);
  box-shadow: var(--shadow-lift);
}

[data-design="aurora"] .hero-orb__tint {
  background:
    radial-gradient(circle at 25% 25%, rgba(124, 58, 237, 0.16), transparent 55%),
    radial-gradient(circle at 75% 75%, rgba(236, 72, 153, 0.14), transparent 55%);
}

[data-design="aurora"] .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 panel. A plain
   tonal block + a more opaque monogram reads clearly instead. ---- */
[data-design="aurora"] .project-card__visual {
  background: var(--bg-2);
}

[data-design="aurora"] .project-card__monogram {
  color: rgba(var(--ink-rgb), 0.3);
}

/* ---- Cosmetic surfaces ---- */
[data-design="aurora"] .demo-badge {
  background: transparent;
  border: 1px solid var(--focus-ring);
  color: var(--focus-ring);
}

[data-design="aurora"] .toolbox-list li {
  background: var(--bg-3);
  border: 1px solid rgba(var(--ink-rgb), 0.1);
  box-shadow: var(--shadow-soft);
}