/* ==========================================================================
   design-claymorphism.css — Claymorphism design language
   Soft, puffy, extruded shapes: muted pastel base, large border-radius
   everywhere, a dual offset-shadow (soft light glow up-left, soft dark
   shadow down-right, both heavily blurred, no hard edges) for a
   "pillow" extrusion look, plus a subtle inset highlight for extra
   puffiness. :active states flatten into an inset "pressed into clay"
   shadow instead of translating like a normal button.
   Scoped entirely under [data-design="claymorphism"] so it's inert
   otherwise — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens (light) — soft periwinkle pastel ----
   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="claymorphism"] {
  --bg-0: #d5d9f2;
  --bg-1: #e4e7f8;
  --bg-2: #ecf0fa;
  --bg-3: #f6f7fd;

  --ink-rgb: 48, 45, 92;
  --focus-ring: #6c63ff;

  --radius-pill: 999px;
  --radius-card: 32px;
  --radius-card-lg: 40px;
  --radius-sm: 20px;

  --shadow-soft: -8px -8px 18px rgba(255, 255, 255, 0.75), 10px 10px 22px rgba(48, 45, 92, 0.16);
  --shadow-lift: -12px -12px 24px rgba(255, 255, 255, 0.8), 14px 14px 30px rgba(48, 45, 92, 0.2);
  --shadow-inner-highlight: inset 2px 2px 4px rgba(255, 255, 255, 0.6), inset -2px -2px 6px rgba(48, 45, 92, 0.08);
}

/* ---- Palette + shadow tokens (dark) — deep muted plum/navy ---- */
:root[data-design="claymorphism"][data-theme="dark"] {
  --bg-0: #1b1830;
  --bg-1: #221e3b;
  --bg-2: #2b2549;
  --bg-3: #362e5a;

  --ink-rgb: 221, 217, 245;
  --focus-ring: #a99bff;

  --shadow-soft: -8px -8px 18px rgba(255, 255, 255, 0.04), 10px 10px 22px rgba(0, 0, 0, 0.45);
  --shadow-lift: -10px -10px 22px rgba(255, 255, 255, 0.05), 14px 14px 30px rgba(0, 0, 0, 0.5);
  --shadow-inner-highlight: inset 2px 2px 4px rgba(255, 255, 255, 0.06), inset -2px -2px 6px rgba(0, 0, 0, 0.32);
}

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

/* ---- Material: solid puffy panel, no blur. Border color stays driven
   by glass.css's existing border tokens (rgba(var(--ink-rgb), …)), but
   clay reads as borderless/seamless, so it's zeroed out below rather
   than left to inherit. ---- */
[data-design="claymorphism"] .glass::before {
  content: none;
}

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

/* ---- Buttons: solid accent pill, puffy dual shadow, flattens into an
   inset "pressed into clay" shadow on :active instead of translating. ---- */
[data-design="claymorphism"] .btn-primary {
  background: var(--focus-ring);
  color: #ffffff;
  border: none;
  box-shadow: -6px -6px 14px rgba(255, 255, 255, 0.5), 6px 6px 16px rgba(48, 45, 92, 0.28);
}

[data-design="claymorphism"] .btn-primary:hover {
  transform: none;
}

[data-design="claymorphism"] .btn-primary:active {
  box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.25), inset -3px -3px 6px rgba(255, 255, 255, 0.15);
  transform: translateY(1px);
}

[data-design="claymorphism"] .btn-secondary {
  background: var(--bg-3);
  border: none;
  box-shadow: -5px -5px 12px rgba(255, 255, 255, 0.6), 5px 5px 14px rgba(48, 45, 92, 0.18);
}

[data-design="claymorphism"] .btn-secondary:active {
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, 0.12), inset -2px -2px 5px rgba(255, 255, 255, 0.3);
  transform: translateY(1px);
}

/* ---- Hero orb: solid puffy clay sphere instead of a glass wash. No
   glossy highlight blob — clay reads matte, not reflective. ---- */
[data-design="claymorphism"] .hero-orb.glass {
  background: var(--bg-3);
  box-shadow: -14px -14px 28px rgba(255, 255, 255, 0.7), 16px 16px 34px rgba(48, 45, 92, 0.24);
}

[data-design="claymorphism"] .hero-orb__tint {
  background: radial-gradient(circle at 30% 28%, rgba(108, 99, 255, 0.16), transparent 60%);
}

[data-design="claymorphism"] .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 pastel panel.
   Recessed clay pocket (inset dual-shadow) + a more opaque monogram
   reads clearly instead. ---- */
[data-design="claymorphism"] .project-card__visual {
  background: var(--bg-2);
  box-shadow: inset 4px 4px 8px rgba(48, 45, 92, 0.12), inset -3px -3px 6px rgba(255, 255, 255, 0.5);
}

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

/* ---- Cosmetic surfaces: small puffy touches on top of what --ink-rgb
   already re-colors automatically. ---- */
[data-design="claymorphism"] .demo-badge {
  box-shadow: -2px -2px 5px rgba(255, 255, 255, 0.6), 2px 2px 6px rgba(48, 45, 92, 0.14);
}

[data-design="claymorphism"] .toolbox-list li {
  background: var(--bg-3);
  border: none;
  box-shadow: -3px -3px 7px rgba(255, 255, 255, 0.6), 3px 3px 8px rgba(48, 45, 92, 0.16);
}