/* ==========================================================================
   design-retro.css — Retro / Y2K design language
   Nostalgic late-90s/2000s web aesthetic: bubbly pastel-to-vivid
   gradients, glossy beveled buttons (a top-to-bottom sheen, the same
   technique as design-skeuomorphism.css but colorful instead of
   metallic), very round "bubble" corners, playful color-tinted drop
   shadows instead of neutral ones.
   Scoped entirely under [data-design="retro"] so it's inert otherwise
   — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens (light) — cotton-candy pink base, hot-
   pink 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="retro"] {
  --bg-0: #ffd1e8;
  --bg-1: #fff0f7;
  --bg-2: #ffe3f1;
  --bg-3: #ffffff;

  --ink-rgb: 91, 33, 82;
  --focus-ring: #ff2ea6;

  --radius-pill: 999px;
  --radius-card: 28px;
  --radius-card-lg: 36px;
  --radius-sm: 16px;

  --shadow-soft: 0 6px 16px -4px rgba(255, 46, 166, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.8);
  --shadow-lift: 0 10px 24px -6px rgba(255, 46, 166, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.85);
  --shadow-inner-highlight: inset 0 2px 3px rgba(255, 255, 255, 0.6);
}

/* ---- Palette + shadow tokens (dark) — deep "millennium" purple/navy,
   brighter pink accent, soft glow instead of a soft drop shadow. ---- */
:root[data-design="retro"][data-theme="dark"] {
  --bg-0: #1a0f2e;
  --bg-1: #241640;
  --bg-2: #2d1b4d;
  --bg-3: #37215c;

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

  --shadow-soft: 0 0 16px rgba(255, 110, 199, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.08);
  --shadow-lift: 0 0 24px rgba(255, 110, 199, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.1);
  --shadow-inner-highlight: inset 0 2px 3px rgba(255, 255, 255, 0.1);
}

/* ---- Body wash — a soft diagonal pastel gradient instead of a flat
   fill, for that bubbly Y2K page-background feel. Atmosphere (orbs/
   grain/cursor light) is hidden below since it's a glass-specific
   effect. ---- */
[data-design="retro"] body {
  background-image: linear-gradient(135deg, var(--bg-0) 0%, var(--bg-1) 50%, var(--bg-2) 100%);
}

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

/* ---- Material: solid glossy panel, no blur. Border color stays
   driven by glass.css's existing border tokens (rgba(var(--ink-rgb),
   ...)) so it re-colors for free from the --ink-rgb override above. ---- */
[data-design="retro"] .glass::before {
  content: none;
}

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

/* ---- Buttons: glossy gradient pill — same top-to-bottom sheen
   technique as design-skeuomorphism.css's buttons, just over a bold
   color fill instead of a metallic one. ---- */
[data-design="retro"] .btn-primary {
  background-color: var(--focus-ring);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0) 45%, rgba(0, 0, 0, 0.05));
  color: #ffffff;
  border: none;
  box-shadow: var(--shadow-soft);
}

[data-design="retro"] .btn-secondary {
  background: var(--bg-3);
  border: 2px solid rgba(var(--ink-rgb), 0.18);
  box-shadow: var(--shadow-soft);
}

/* ---- Hero orb: bubbly glossy sphere with a colorful gradient fill
   instead of the cyan/peach glass wash. The highlight blob is left
   as-is — a soft white specular blur is exactly the Y2K "glossy
   bubble" look. ---- */
[data-design="retro"] .hero-orb.glass {
  background:
    radial-gradient(circle at 30% 25%, rgba(255, 255, 255, 0.7), transparent 45%),
    linear-gradient(160deg, var(--focus-ring), #7b5cff);
  box-shadow: var(--shadow-lift);
}

[data-design="retro"] .hero-orb__tint {
  background: radial-gradient(circle at 30% 28%, rgba(255, 255, 255, 0.25), transparent 55%);
}

/* ---- Project card visual/monogram area: same cyan/peach glass wash
   as the hero orb's tint, invisible against a flat glossy panel. A
   soft pastel block + a more opaque monogram reads clearly instead. ---- */
[data-design="retro"] .project-card__visual {
  background: var(--bg-2);
}

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

/* ---- Cosmetic surfaces ---- */
[data-design="retro"] .demo-badge {
  background: var(--focus-ring);
  color: #ffffff;
}

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