/* ==========================================================================
   design-skeuomorphism.css — Skeuomorphism design language
   Real-world material mimicry: warm linen/brushed-parchment base tones,
   surfaces read as physically raised via an outer drop-shadow + an
   inset top highlight + an inset bottom shadow (no blur-based
   translucency anywhere), buttons use a top-to-bottom gloss gradient
   that visibly inverts on :active so they look physically pressed.
   Scoped entirely under [data-design="skeuomorphism"] so it's inert
   otherwise — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens (light) ----
   Reusing the --ink-rgb, --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="skeuomorphism"] {
  --bg-0: #d9cdb6;
  --bg-1: #e9e0cc;
  --bg-2: #f0e8d4;
  --bg-3: #f8f1e0;

  --ink-rgb: 61, 47, 31;
  --focus-ring: #8a5a2b;

  --radius-pill: 10px;
  --radius-card: 14px;
  --radius-card-lg: 18px;
  --radius-sm: 8px;

  --shadow-soft: 0 8px 16px -6px rgba(61, 47, 31, 0.32), 0 2px 4px -2px rgba(61, 47, 31, 0.22);
  --shadow-lift: 0 14px 28px -10px rgba(61, 47, 31, 0.38), 0 3px 6px -2px rgba(61, 47, 31, 0.26);
  --shadow-inner-highlight: inset 0 1px 0 rgba(255, 255, 255, 0.55), inset 0 -2px 5px rgba(61, 47, 31, 0.14);
}

/* ---- Palette + shadow tokens (dark) — espresso/gunmetal ---- */
:root[data-design="skeuomorphism"][data-theme="dark"] {
  --bg-0: #1b150f;
  --bg-1: #241c14;
  --bg-2: #2c221a;
  --bg-3: #372a1f;

  --ink-rgb: 230, 214, 190;
  --focus-ring: #d99a4e;

  --shadow-soft: 0 8px 16px -6px rgba(0, 0, 0, 0.5), 0 2px 4px -2px rgba(0, 0, 0, 0.4);
  --shadow-lift: 0 14px 28px -10px rgba(0, 0, 0, 0.55), 0 3px 6px -2px rgba(0, 0, 0, 0.42);
  --shadow-inner-highlight: inset 0 1px 0 rgba(255, 235, 200, 0.12), inset 0 -2px 5px rgba(0, 0, 0, 0.35);
}

/* ---- Body texture — a very low-alpha woven-linen crosshatch. Cheap,
   CSS-only, no image asset. Atmosphere (orbs/grain/cursor light) is
   hidden below since it's a glass-specific effect. ---- */
[data-design="skeuomorphism"] body {
  background-image:
    repeating-linear-gradient(45deg, rgba(0, 0, 0, 0.015) 0px, rgba(0, 0, 0, 0.015) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.025) 0px, rgba(255, 255, 255, 0.025) 1px, transparent 1px, transparent 3px);
}

[data-design="skeuomorphism"][data-theme="dark"] body {
  background-image:
    repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.015) 0px, rgba(255, 255, 255, 0.015) 1px, transparent 1px, transparent 3px),
    repeating-linear-gradient(-45deg, rgba(0, 0, 0, 0.03) 0px, rgba(0, 0, 0, 0.03) 1px, transparent 1px, transparent 3px);
}

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

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

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

/* ---- Buttons: gloss gradient, inverts + sinks on :active for a
   physically-pressed feel. ---- */
[data-design="skeuomorphism"] .btn-primary {
  background-color: var(--text-primary);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.22), rgba(255, 255, 255, 0) 40%, rgba(0, 0, 0, 0.12));
  border: 1px solid rgba(0, 0, 0, 0.18);
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

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

[data-design="skeuomorphism"] .btn-primary:active {
  background-image: linear-gradient(180deg, rgba(0, 0, 0, 0.15), rgba(255, 255, 255, 0) 60%, rgba(255, 255, 255, 0.12));
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.35);
  transform: translateY(1px);
}

[data-design="skeuomorphism"] .btn-secondary {
  background: var(--bg-3);
  border: 1px solid rgba(var(--ink-rgb), 0.16);
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, 0.22), inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

[data-design="skeuomorphism"] .btn-secondary:active {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
  transform: translateY(1px);
}

/* ---- Hero orb: warm gloss instead of the cyan/peach glass wash. The
   highlight blob is left as-is — a plain soft-white specular blur reads
   just as well as "glossy metal/plastic" as it does "glass". ---- */
[data-design="skeuomorphism"] .hero-orb.glass {
  background:
    radial-gradient(circle at 32% 26%, rgba(255, 255, 255, 0.5), transparent 45%),
    var(--bg-3);
  box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.4), inset 0 2px 3px rgba(255, 255, 255, 0.5), inset 0 -8px 14px rgba(0, 0, 0, 0.16);
}

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

/* ---- Project card visual/monogram area: same cyan/peach glass wash
   as the hero orb's tint (barely-there by design against a blurred
   glass card), invisible against a flat solid panel. Recessed inset
   frame + a much more opaque monogram reads clearly instead. ---- */
[data-design="skeuomorphism"] .project-card__visual {
  background: var(--bg-2);
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.18), inset 0 -1px 0 rgba(255, 255, 255, 0.3);
}

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

/* ---- Cosmetic surfaces: small emboss touches on top of what --ink-rgb
   already re-colors automatically. ---- */
[data-design="skeuomorphism"] .demo-badge {
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), inset 0 -1px 2px rgba(0, 0, 0, 0.08);
}

[data-design="skeuomorphism"] .toolbox-list li {
  background: var(--bg-3);
  box-shadow: 0 2px 4px -2px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}