/* ==========================================================================
   design-neubrutalism.css — Neubrutalism design language
   Bold flat colors, thick solid-black borders, hard offset shadows
   (zero blur — a shadow is a flat color block, not a soft glow), sharp
   near-zero corner radii, chunky bold typography feel. Buttons "press
   all the way in" on :active — the offset shadow disappears entirely
   and the button translates to where the shadow used to sit.
   Scoped entirely under [data-design="neubrutalism"] so it's inert
   otherwise — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens (light) — cream base, bold yellow 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="neubrutalism"] {
  --bg-0: #e8e3d3;
  --bg-1: #f5f1e3;
  --bg-2: #faf7ee;
  --bg-3: #ffffff;

  --ink-rgb: 10, 10, 10;
  --focus-ring: #ffde59;

  --radius-pill: 6px;
  --radius-card: 4px;
  --radius-card-lg: 4px;
  --radius-sm: 2px;

  --shadow-soft: 4px 4px 0 rgba(10, 10, 10, 0.95);
  --shadow-lift: 6px 6px 0 rgba(10, 10, 10, 0.95);
  --shadow-inner-highlight: 0 0 #0000;
}

/* ---- Palette + shadow tokens (dark) — near-black base, same bold
   yellow accent (pops the same way against black as it does cream). ---- */
:root[data-design="neubrutalism"][data-theme="dark"] {
  --bg-0: #1a1a1a;
  --bg-1: #111111;
  --bg-2: #0a0a0a;
  --bg-3: #000000;

  --ink-rgb: 255, 255, 255;
  --focus-ring: #ffde59;

  --shadow-soft: 4px 4px 0 rgba(255, 255, 255, 0.9);
  --shadow-lift: 6px 6px 0 rgba(255, 255, 255, 0.9);
}

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

/* ---- Material: flat solid panel, no blur, thick full-opacity border
   (the default glass border tokens are far too subtle — rgba(ink,
   0.08-0.2) — for this style, so border is set explicitly here rather
   than left to inherit). ---- */
[data-design="neubrutalism"] .glass::before {
  content: none;
}

[data-design="neubrutalism"] .glass-ultra,
[data-design="neubrutalism"] .glass-floating,
[data-design="neubrutalism"] .glass-frosted {
  background: var(--bg-3);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: 3px solid rgba(var(--ink-rgb), 1);
}

/* ---- Buttons: solid accent block, hard offset shadow that fully
   disappears on :active as the button translates into its place —
   the classic neubrutalist "pressed all the way in" interaction. ---- */
[data-design="neubrutalism"] .btn-primary {
  background: var(--focus-ring);
  color: #0a0a0a;
  border: 3px solid rgba(var(--ink-rgb), 1);
  box-shadow: var(--shadow-soft);
}

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

[data-design="neubrutalism"] .btn-primary:active,
[data-design="neubrutalism"] .btn-secondary:active {
  box-shadow: none;
  transform: translate(4px, 4px);
}

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

/* ---- Hero orb: squared-off block instead of a forced circle, thick
   border + hard shadow, no glass gloss or tint wash. ---- */
[data-design="neubrutalism"] .hero-orb.glass {
  border-radius: var(--radius-card);
  background: var(--bg-3);
  border: 4px solid rgba(var(--ink-rgb), 1);
  box-shadow: 8px 8px 0 rgba(var(--ink-rgb), 1);
}

[data-design="neubrutalism"] .hero-orb__tint {
  display: none;
}

[data-design="neubrutalism"] .hero-orb__highlight {
  display: none;
}

[data-design="neubrutalism"] .hero-chip {
  border: 3px solid rgba(var(--ink-rgb), 1);
  border-radius: var(--radius-sm);
}

/* ---- Project card visual/monogram area: same cyan/peach glass wash
   as the hero orb's tint, invisible against a flat panel. A bordered
   block + a bold, high-contrast monogram reads clearly instead —
   neubrutalism favors strong contrast over subtlety. ---- */
[data-design="neubrutalism"] .project-card__visual {
  background: var(--bg-2);
  border: 2px solid rgba(var(--ink-rgb), 1);
}

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

/* ---- Cosmetic surfaces: high-contrast blocks, not tinted washes. ---- */
[data-design="neubrutalism"] .demo-badge {
  background: rgba(var(--ink-rgb), 1);
  color: var(--bg-1);
  border-radius: var(--radius-sm);
}

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