/* 8bit — classic console palette (NES/Game Boy-limited color count, kept
   genuinely restrained: near-black navy ground, one red/green/gold accent
   trio, no extra hues). Press Start 2P for --font-display, blocky
   pixel-art-styled decoration, hard right-angle borders throughout.

   Slug/id note: "8bit" has a leading digit. [data-theme="8bit"] is a valid
   CSS attribute selector (attribute values aren't CSS identifiers, so the
   leading-digit identifier restriction doesn't apply), the link id
   "theme-pack-8bit" is a valid HTML id (id="8bit" alone would also be
   legal HTML5, though not a valid *CSS* id-selector target without
   escaping — moot here since this app's boot script/theme.js only ever
   read the id via getElementById()/template-string concatenation, never
   as a bare #8bit CSS selector), and 'PACKS' in theme.js is a plain JS
   array of strings, not object keys, so no leading-digit property-access
   issue either. No edge case found.

   GLOBAL CONSTRAINT (plan item #8): zero border-radius anywhere in this
   pack's scope. The single override block below re-zeroes every
   border-radius theme.css declares (.card/.tile/button/input/select/
   .badge/.chip/.tooltip/.bot-vibe/.dialog-box/.dialog-form input/.toast/
   .toast-action/.bulk-bar/#debug-theme-panel) — each override selector is
   more specific than theme.css's own rule (attribute-scoped compound vs.
   plain class, or attribute+id vs. bare id), so it wins regardless of
   theme.css's cascade order, including inside theme.css's own 700px
   mobile media block. Audited: no other rule in this file declares
   border-radius.

   Contrast: --text/--text-2/--muted verified against all three grounds
   with the standard relative-luminance formula at full body-text WCAG
   rigor. Worst case is --muted vs --bg3 — an earlier #8888b0 draft only
   cleared bg3 at 4.32:1 (just under the 4.5:1 AA bar), brightened to
   #9494bc for 5.04:1. --danger vs --danger-dark is 4.93:1, clearing the
   TOKEN CONTRACT bar in theme.css.
   See: circuitforge-plans/vaportrade-clone/superpowers/specs/
   2026-08-13-ui-redesign-design.md §3 "Theme-pack roadmap". */
/* Pixeloid (2026-09-02, --font-display, superseding the same-day Box pick
   via a later drag-and-drop export round): pixel-grid display face, SIL
   OFL, self-hosted under static/fonts/pixeloid/ -- a closer match to this
   pack's own pixel-art identity than Box's rounded geometric read. Box
   stays self-hosted (matrix-terminal.css still uses it). */
@font-face{
  font-family:"Pixeloid Sans";
  src:url("/vaportrade/static/fonts/pixeloid/PixeloidSans-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Cairopixel";
  src:url("/vaportrade/static/fonts/cairopixel/Cairopixel.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
/* Midnight Letters (2026-09-02, --font-h2, the new 3rd font role):
   SIL OFL, self-hosted under static/fonts/midnight-letters/. */
@font-face{
  font-family:"Midnight Letters";
  src:url("/vaportrade/static/fonts/midnight-letters/MidnightLetters-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
[data-theme="8bit"]{
  --bg:#0f0f1e; --bg2:#1a1a2e; --bg3:#262640; --border:#4a4a6a;
  --text:#f4f4ff; --text-2:#b8b8d8; --muted:#9494bc;
  --accent-1:#ff3355; --accent-2:#33ff77; --accent-3:#ffcc33;
  --success:#33ff77; --danger:#ff3355; --danger-dark:#3a0011; --warning:#ffcc33;
  --font-display:"Pixeloid Sans",monospace;
  --font-mono:"Cairopixel",monospace;
  --font-h2:"Midnight Letters",monospace;
  --font-size-display:2rem; --font-size-mono:1.5rem; --font-size-h2:1.625rem;
}
/* Zero every border-radius theme.css declares -- see header comment. */
[data-theme="8bit"] .card,
[data-theme="8bit"] .tile,
[data-theme="8bit"] button,
[data-theme="8bit"] input,
[data-theme="8bit"] select,
[data-theme="8bit"] .badge,
[data-theme="8bit"] .chip,
[data-theme="8bit"] .chip-wrap .help-pop,
[data-theme="8bit"] .tooltip,
[data-theme="8bit"] .bot-vibe,
[data-theme="8bit"] .dialog-box,
[data-theme="8bit"] .dialog-form input,
[data-theme="8bit"] .toast,
[data-theme="8bit"] .toast-action,
[data-theme="8bit"] .bulk-bar,
[data-theme="8bit"] #debug-theme-panel{
  border-radius:0;
}
/* Blocky title, no gradient text -- flat accent-3 gold, letter-spacing
   for a chunky pixel-menu read. */
[data-theme="8bit"] h1 .grad{
  background:none;color:var(--accent-3);
  letter-spacing:2px;
}
/* Blinking "PRESS START"-style cursor block after the title -- same
   ::after trick as matrix-terminal.css's cursor, reduced-motion gated. */
[data-theme="8bit"] h1::after{
  content:"\2588";color:var(--accent-3);margin-left:6px;
  animation:eightbit-cursor-blink 1s steps(1) infinite;
}
@keyframes eightbit-cursor-blink{
  0%,49%{opacity:1}
  50%,100%{opacity:0}
}
@media (prefers-reduced-motion: reduce){
  [data-theme="8bit"] h1::after{animation:none;opacity:1}
}
:root:is([data-motion="reduced"],[data-motion="off"]) [data-theme="8bit"] h1::after{animation:none;opacity:1}
/* Thick 2px hard-edged borders + solid offset "pixel" shadow (no blur) --
   classic retro-console button/panel framing, replacing theme.css's soft
   drop shadows entirely. */
[data-theme="8bit"] .card,
[data-theme="8bit"] .tile{
  border:2px solid var(--border);
  box-shadow:4px 4px 0 var(--bg3);
}
/* Bespoke pixel-art button (2026-08-28 button glow-up note: this pack
   opts OUT of the new base button{} animated gradient-border/cut-corner
   look, theme.css -- deliberately blocky offset-shadow pixel identity,
   incompatible with a diagonal clip-path cut. clip-path:none undoes the
   base rule's cut-corner shape; background/border/box-shadow below
   already override the base rule's own via this selector's much higher
   specificity. content:none on ::before/::after is the REAL opt-out,
   though -- negative z-index does NOT mean "behind this element's own
   background" (confirmed empirically: a negative-z-index pseudo-element
   paints ABOVE its own establishing element's background, per CSS2.1's
   stacking order -- the root/element's own background is painted FIRST,
   before any of its stacking-context descendants, negative z-index
   included). Without this, the base rule's ::after (near-black inset
   fill) would silently paint over this pack's own var(--accent-1)
   background regardless of what's declared above. */
[data-theme="8bit"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle){
  background:var(--accent-1);color:var(--bg);
  border:2px solid var(--text);
  box-shadow:3px 3px 0 var(--bg3);
  clip-path:none;
}
[data-theme="8bit"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle)::before,
[data-theme="8bit"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle)::after{
  content:none;
}
[data-theme="8bit"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle):hover{
  filter:none;background:var(--accent-2);
}
[data-theme="8bit"] button.ghost{border:2px solid var(--border)}
/* ▪ blocky section-heading marker, same divider pattern as the other
   packs, pixel-art flavored instead of an emoji glyph. */
[data-theme="8bit"] h2{
  display:flex;align-items:center;gap:6px;
  text-transform:uppercase;letter-spacing:.05em;
}
[data-theme="8bit"] h2::before{content:"\25AA";color:var(--accent-3)}
[data-theme="8bit"] .chip.on{
  background:var(--accent-1);border-color:var(--text);color:var(--bg);
}