/* Paragade (Mass Effect) — squared-off sci-fi HUD framing, condensed sans
   display face, dialog-wheel-inspired decorative accents on choice/confirm
   UI elements.

   DESIGN RULING (task-3-brief.md's open question): the source spec left
   unresolved whether paragon-blue/renegade-red split by theme *variant*
   (two separate packs picked at theme-select time) or by *action-type*
   within one pack (both tones present simultaneously, paragon-toned for
   constructive actions and renegade-toned for destructive ones). This
   file takes the plan's stated default -- a single coherent theme-variant,
   not per-action dual-toning. Concretely: paragon-blue is this pack's
   dominant identity across --accent-1/--accent-2/--accent-3, and
   renegade-red is used ONLY where the 14-token contract already calls
   for a red semantically -- --danger/--danger-dark -- exactly like every
   other pack in this app uses --danger for destructive actions. That's
   normal semantic-color usage within the existing contract, not a second
   dual-toning system layered on top: there's no second "renegade mode" of
   --accent-1/2/3, no per-button red/blue split beyond what --danger
   already drives elsewhere (e.g. .confirm-armed, button.danger). Reasoning:
   a real per-action dual-tone system would need either a 15th token (out
   of scope -- the contract is fixed at 14) or hardcoded literals inside
   selectors like button:not(.danger) vs button.danger duplicating what
   --accent-1 vs --danger already express, which is redundant and not
   simpler. A single coherent identity also reads better as a *pack*
   (something you pick once, like every other pack here) than a system
   that silently colors different buttons differently underneath the user
   without them choosing that. If a future task wants true per-action
   dual-toning as a distinct pack, that's a new slug (e.g. "paragade-dual"),
   not a change to this file.

   Font: Oswald (OFL-licensed condensed sans, self-hosted) for
   --font-display -- the brief's suggested condensed-sans family, reads
   as squared-off HUD titling. --font-mono stays a system stack (no
   condensed mono needed for this pack's identity).

   Dialog-wheel accents: a subtle radial/wheel-segment conic-gradient ring
   on choice/confirm-style elements specifically (button, .chip,
   button.confirm-armed) -- NOT a literal interactive dialog-wheel widget,
   per the brief's explicit scope guard. Purely decorative, CSS-only.

   Contrast: --text/--text-2/--muted verified against all three grounds at
   full body-text WCAG rigor. --muted needed two rounds of brightening
   (#7688ac only cleared 4.30:1 on bg3, short of the 4.5:1 AA bar) to
   #8294b6 for 5.01:1 worst case. text 13.05:1, text-2 7.54:1 worst case.
   danger vs danger-dark: 4.55:1.
   See: circuitforge-plans/vaportrade-clone/superpowers/specs/
   2026-08-13-ui-redesign-design.md §3 "Theme-pack roadmap". */
/* Bowler + Turret Road (2026-09-02, swapped in from Oswald via the
   font-gallery-generator drag-and-drop tool's exported picks -- Alan's
   own stated lean toward Bowler over Box for this pack's HUD-titling
   read). Both SIL OFL, self-hosted under static/fonts/bowler/ and
   static/fonts/turret-road/. */
@font-face{
  font-family:"Bowler";
  src:url("/vaportrade/static/fonts/bowler/Bowler-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
/* Gradient Vector (2026-09-02, moved from --font-mono to --font-h2, the
   new 3rd font role, via a later drag-and-drop export round). SIL OFL,
   shared with ps1-lowpoly.css's own Gradient Vector pick. */
@font-face{
  font-family:"Gradient Vector";
  src:url("/vaportrade/static/fonts/gradient-vector/GradientVector-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
/* DPSDbeyond (2026-09-02, --font-mono, taking over from Gradient Vector).
   SIL OFL (static/fonts/dpsd-beyond/OFL.txt is a clean, standard grant --
   the zip also bundled an unrelated backpacker_license.pdf, presumably
   leftover from wherever it was originally packaged; doesn't apply to
   this font). Shared with ps1-lowpoly.css's own DPSDbeyond pick. */
@font-face{
  font-family:"DPSDbeyond";
  src:url("/vaportrade/static/fonts/dpsd-beyond/DPSDbeyond-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
[data-theme="paragade"]{
  --bg:#0a0e1a; --bg2:#121a2e; --bg3:#1a2440; --border:#2c3d5e;
  --text:#e8edf7; --text-2:#a8b6d6; --muted:#8294b6;
  --accent-1:#3b82f6; --accent-2:#60a5fa; --accent-3:#7dd3fc;
  --success:#34d399; --danger:#ef4444; --danger-dark:#3a0a0a; --warning:#fbbf24;
  --font-display:"Bowler",sans-serif;
  --font-mono:"DPSDbeyond",monospace;
  --font-h2:"Gradient Vector",sans-serif;
  --font-size-display:2rem; --font-size-mono:1.125rem; --font-size-h2:1.125rem;
}
/* Squared-off sci-fi HUD title accent -- flat paragon-blue, no gradient,
   letter-spacing for a chunky condensed-caps HUD read. */
[data-theme="paragade"] h1 .grad{
  background:none;color:var(--accent-1);
  text-transform:uppercase;letter-spacing:1px;
}
/* Squared-off HUD panel framing -- corner-notch clip via a linear-gradient
   border-image stand-in (angular chamfered corners), sharper than the
   default rounded .card/.tile look but not the zero-radius hard-edge
   discipline Tron-Neon uses (this pack keeps a small 2px radius for a
   "sci-fi console" read, not a fully hard-edge one). */
[data-theme="paragade"] .card,
[data-theme="paragade"] .tile{
  border:1px solid var(--border);
  border-top:2px solid var(--accent-1);
  border-radius:2px;
}
/* 2026-08-28 button glow-up note: this pack opts OUT of the new base
   button{} animated gradient-border/cut-corner look (theme.css) --
   already has its own deliberate ::before dial-texture motif (below),
   which naturally wins the cascade over the base rule's own ::before
   (higher specificity: this selector's :not(.ghost) clause outweighs
   the base rule's bare button::before) for every property it declares
   -- content/position/inset/background/opacity -- but NOT z-index,
   which it never sets; the base rule's z-index:-2 still applies and
   that's fine, this decoration was always meant to float above the
   real background anyway. clip-path:none undoes the base rule's cut-
   corner shape, which this pack's own subtler border-radius:2px
   rectangle doesn't want.

   ::after is the real gap: this pack never touches it at all, so the
   base rule's own ::after (near-black inset fill) would otherwise
   silently paint OVER this pack's var(--accent-1) background --
   negative z-index paints ABOVE an element's own background per
   CSS2.1 stacking order (confirmed empirically), not behind it. */
[data-theme="paragade"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle){
  background:var(--accent-1);color:var(--bg);
  border-radius:2px;
  clip-path:none;
}
[data-theme="paragade"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle)::after{
  content:none;
}
[data-theme="paragade"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle):hover{
  filter:none;background:var(--accent-2);
}
[data-theme="paragade"] button.ghost{border:1px solid var(--border);border-radius:2px}
[data-theme="paragade"] .chip.on{
  background:rgba(59,130,246,.2);border-color:var(--accent-1);color:var(--text)}
/* Dialog-wheel-inspired decorative accent -- a faint conic-gradient
   wheel-segment ring behind choice/confirm-style elements specifically
   (button, .chip, button.confirm-armed), via ::before on each. Subtle
   radial motif evoking the paragon/renegade dialog wheel without being a
   literal interactive wheel widget (no wedge-click targets, no wheel
   layout -- just a background texture on existing controls). */
[data-theme="paragade"] button:not(.ghost),
[data-theme="paragade"] .chip{
  position:relative;overflow:hidden;
}
[data-theme="paragade"] button:not(.ghost)::before,
[data-theme="paragade"] .chip::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:conic-gradient(from 0deg,rgba(255,255,255,.08) 0deg 10deg,transparent 10deg 90deg);
  opacity:.5;
}
/* confirm-armed keeps its own pulsing ring from theme.css untouched --
   this pack only recolors it toward renegade-red via --danger, which
   theme.css's rule already references; no extra override needed here. */
[data-theme="paragade"] h2{
  display:flex;align-items:center;gap:6px;
  text-transform:uppercase;letter-spacing:.05em;
}
[data-theme="paragade"] h2::before{content:"\25C8";color:var(--accent-3)}