/* ==========================================================================
   design-terminal.css — Terminal / Hacker design language
   Monospace font, phosphor-green-on-black CRT terminal look, subtle
   horizontal scanline texture, thin/dashed borders instead of blur,
   soft green text-glow. Always dark — like design-neon.css, the
   aesthetic itself is inherently dark, so "light" mode becomes a
   dimmer dark-green base and "dark" mode a true-black base with more
   glow, rather than an actual light page.
   Scoped entirely under [data-design="terminal"] so it's inert
   otherwise — see includes/design_switcher.php and main.js's
   initDesignSwitcher() for the attribute mechanism.
   ========================================================================== */

/* ---- Palette + shadow tokens ("light" = dim dark-green base) ----
   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. --font-display
   is overridden too, so the whole site's type switches to monospace. ---- */
:root[data-design="terminal"] {
  --bg-0: #0a1410;
  --bg-1: #0d1a14;
  --bg-2: #0f1f18;
  --bg-3: #13251c;

  --ink-rgb: 60, 255, 110;
  --focus-ring: #3cff6e;

  --font-display: "Courier New", "SF Mono", Consolas, monospace;

  --radius-pill: 0px;
  --radius-card: 0px;
  --radius-card-lg: 0px;
  --radius-sm: 0px;

  --shadow-soft: 0 0 6px rgba(60, 255, 110, 0.15);
  --shadow-lift: 0 0 10px rgba(60, 255, 110, 0.25);
  --shadow-inner-highlight: 0 0 #0000;
}

/* ---- Palette + shadow tokens ("dark" = true black, more glow) ---- */
:root[data-design="terminal"][data-theme="dark"] {
  --bg-0: #000000;
  --bg-1: #020402;
  --bg-2: #040804;
  --bg-3: #061006;

  --ink-rgb: 90, 255, 130;
  --focus-ring: #5aff82;

  --shadow-soft: 0 0 8px rgba(90, 255, 130, 0.2);
  --shadow-lift: 0 0 14px rgba(90, 255, 130, 0.32);
}

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

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

/* ---- Material: flat panel, no blur, a thin green outline instead of
   the default low-alpha ink border. ---- */
[data-design="terminal"] .glass::before {
  content: none;
}

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

/* ---- Buttons: outline-only, green text glow, a "> " command-prompt
   prefix on the primary CTA. ---- */
[data-design="terminal"] .btn-primary {
  background: transparent;
  color: var(--focus-ring);
  border: 1px solid var(--focus-ring);
  text-shadow: 0 0 4px rgba(60, 255, 110, 0.5);
}

[data-design="terminal"] .btn-primary::before {
  content: "> ";
}

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

/* ---- Hero orb: a terminal-window block — dark fill, thin green
   frame, soft glow, no glass gloss or tint wash. ---- */
[data-design="terminal"] .hero-orb.glass {
  border-radius: 4px;
  background: var(--bg-3);
  border: 1px solid var(--focus-ring);
  box-shadow: var(--shadow-lift);
}

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

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

[data-design="terminal"] .hero-chip {
  border-radius: 2px;
}

/* ---- Project card visual/monogram area: same cyan/peach glass wash
   as the hero orb's tint, invisible against a flat dark panel. A
   dashed-bordered block + a glowing green monogram reads clearly
   instead. ---- */
[data-design="terminal"] .project-card__visual {
  background: var(--bg-2);
  border: 1px dashed rgba(var(--ink-rgb), 0.3);
}

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

/* ---- Cosmetic surfaces ---- */
[data-design="terminal"] .demo-badge {
  background: transparent;
  border: 1px solid var(--focus-ring);
  color: var(--focus-ring);
  border-radius: 0;
}

[data-design="terminal"] .toolbox-list li {
  background: transparent;
  border: 1px solid rgba(var(--ink-rgb), 0.25);
  border-radius: 0;
}