/* ==========================================================================
   design-material.css — Material Design language
   Google Material 3-inspired: tonal purple surfaces, elevation-based
   layered shadows (no inset highlights — Material leans on shadow
   layering and surface tint, not bevels), pill-shaped buttons, filled
   primary / outlined secondary button pairing.
   Scoped entirely under [data-design="material"] so it's inert
   otherwise — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens (light) — Material 3 tonal purple.
   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="material"] {
  --bg-0: #ece6f0;
  --bg-1: #fef7ff;
  --bg-2: #f3edf7;
  --bg-3: #ffffff;

  --ink-rgb: 28, 27, 31;
  --focus-ring: #6750a4;

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

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.3), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
  --shadow-inner-highlight: 0 0 #0000;
}

/* ---- Palette + shadow tokens (dark) — Material 3 dark surfaces get
   progressively lighter with elevation rather than darker, per the
   M3 dark-theme convention — --bg-3 (cards) is lighter than --bg-1
   (page), the reverse of every other design here. ---- */
:root[data-design="material"][data-theme="dark"] {
  --bg-0: #141218;
  --bg-1: #1c1b1f;
  --bg-2: #251f2e;
  --bg-3: #2b2530;

  --ink-rgb: 230, 224, 233;
  --focus-ring: #d0bcff;

  --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --shadow-lift: 0 1px 2px rgba(0, 0, 0, 0.5), 0 2px 6px 2px rgba(0, 0, 0, 0.3);
}

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

/* ---- Material tier: flat elevated surface, no blur, no border —
   Material separates surfaces with shadow/tint, not edges. ---- */
[data-design="material"] .glass::before {
  content: none;
}

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

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

/* ---- Buttons: filled primary pill with elevation shadow; outlined
   secondary with no fill, matching Material's filled/outlined pair. ---- */
[data-design="material"] .btn-primary {
  background: var(--focus-ring);
  color: #ffffff;
  border: none;
  box-shadow: var(--shadow-soft);
}

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

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

/* ---- Hero orb: kept circular — Material 3's "expressive" shape
   language embraces blobs/circles rather than banning them. Flat
   elevated surface, soft primary-tinted wash instead of the cyan/
   peach glass tint, no glass gloss highlight. ---- */
[data-design="material"] .hero-orb.glass {
  background: var(--bg-3);
  box-shadow: var(--shadow-lift);
}

[data-design="material"] .hero-orb__tint {
  background: radial-gradient(circle at 30% 28%, rgba(103, 80, 164, 0.14), transparent 60%);
}

[data-design="material"] .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="material"] .project-card__visual {
  background: var(--bg-2);
}

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

/* ---- Cosmetic surfaces: Material "assist chip" styling — outlined,
   not filled. ---- */
[data-design="material"] .demo-badge {
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), 0.3);
}

[data-design="material"] .toolbox-list li {
  background: var(--bg-2);
  border: 1px solid rgba(var(--ink-rgb), 0.2);
}