/* Lisa Frank — 90s pastel maximalist. Fredoka chosen over Baloo 2 per the
   2026-08-13 font-render comparison (bolder/rounder read carries the
   "maximalist" identity more directly); Baloo 2 stays the documented
   fallback if Fredoka proves too heavy at small sizes in real use.
   See: circuitforge-plans/vaportrade-clone/superpowers/specs/
   2026-08-13-ui-redesign-design.md §3. */
/* Momo Signature + Cafe24 Dongdong (2026-09-02, swapped in from Fredoka
   via the font-gallery-generator drag-and-drop tool's exported picks):
   Momo Signature is a handwritten-signature script for --font-display,
   Cafe24 Dongdong (a rounded Korean/Latin display face) fills the
   --font-mono slot this pack never had a dedicated face for before. Both
   SIL OFL. */
@font-face{
  font-family:"Momo Signature";
  src:url("/vaportrade/static/fonts/momo-signature/MomoSignature-Regular.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
@font-face{
  font-family:"Cafe24 Dongdong";
  src:url("/vaportrade/static/fonts/cafe24-dongdong/Cafe24Dongdong.woff2") format("woff2");
  font-weight:400;
  font-display:swap;
}
[data-theme="lisa-frank"]{
  --bg:#fef6fb; --bg2:#ffffff; --bg3:#fce7f3; --border:#f0abfc;
  /* --muted was #b48ead against --bg2 #ffffff -- 2.8:1, well under the
     4.5:1 AA minimum for the small nav-item label text that reads this
     token (cf-a11y-dev audit, 2026-08-25). Darkened within the same
     pink/mauve hue to #8f5a82 -- 5.3:1, computed via relative-luminance
     (WCAG 2.1 formula), same verification approach ps1-lowpoly.css and
     neon-casino-light.css already document doing for their own packs. */
  --text:#4a1942; --text-2:#9d6b93; --muted:#8f5a82;
  --accent-1:#ec4899; --accent-2:#22d3ee; --accent-3:#facc15;
  --success:#16a34a; --danger:#f43f5e; --danger-dark:#3a0a17; --warning:#f59e0b;
  --font-display:"Momo Signature",sans-serif;
  --font-mono:"Cafe24 Dongdong",monospace;
  --font-size-display:1.75rem; --font-size-mono:1.125rem; --font-size-h2:1.25rem;
}
/* Sparkle/glitter accent on the app title -- Lisa Frank's version of Neon
   Casino's ambient glow, same idea (a signature decorative touch that's
   pack-specific, not token-expressed). */
[data-theme="lisa-frank"] h1 .grad{
  background:linear-gradient(90deg,#f472b6,#facc15,#22d3ee,#a78bfa);
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
/* :not(.ghost):not(.danger) -- same load-bearing reason as neon-casino.css's
   equivalent rule (see that file's comment): without it, this ties
   button.ghost/button.danger's specificity and wins on cascade order,
   silently repainting them. */
/* Rainbow gradient, not solid pink -- buttons are the single highest-
   frequency, largest-area element on every screen, so a solid --accent-1
   fill here was the biggest single reason this pack read as pink-only
   even after the .botcard/.chip.on fixes below (2026-08-14 follow-up #2). */
/* 2026-08-28 button glow-up: removed this pack's own flat rainbow-
   gradient fill -- theme.css's base button{} rule now gives every pack
   an ANIMATED gradient-border CTA via --accent-1/2/3 (this pack's own
   pink/cyan/yellow trio), which reads as more rainbow-maximalist in
   motion than a static fill ever did, not less. White text (kept from
   the removed rule below) still works fine against the new fixed
   near-black button fill. */
[data-theme="lisa-frank"] button:not(.ghost):not(.danger):not(.dice-roll):not(.app-nav-toggle){
  color:#fff;
}
/* :not(.tile-promoted) exemption is load-bearing: this rule's specificity
   (0,2,0 -- attribute + class) beats .tile-promoted's own box-shadow rule
   in theme.css (0,1,0 -- class only), and this file loads after theme.css,
   so without the exemption a promoted tile's --accent-1 ring box-shadow
   gets silently overridden by this generic pink drop-shadow, leaving only
   the border-color to show the promotion. */
[data-theme="lisa-frank"] .card,
[data-theme="lisa-frank"] .tile:not(.tile-promoted){
  box-shadow:0 2px 10px rgba(236,72,153,.12);
}
/* Rainbow trim on the large background surfaces themselves (2026-08-14
   follow-up #2) -- .card/.tile keep the pastel --bg2/--bg3 ground per the
   spec ("rainbow gradients ON white/pastel ground," not instead of it),
   but a plain --border-colored 1px outline gave those large panels zero
   color presence. border-image replaces just the outline color with a
   thin multi-hue gradient; :not(.tile-promoted) excluded because
   border-image would visually compete with that state's own solid
   --accent-1 border-color + ring box-shadow. */
[data-theme="lisa-frank"] .card,
[data-theme="lisa-frank"] .tile:not(.tile-promoted){
  border-image:linear-gradient(90deg,var(--accent-1),var(--accent-3),var(--accent-2)) 1;
}
/* --accent-2/--accent-3 rainbow touches -- 2026-08-14 follow-up. theme.css's
   structural rules (.botcard, .chip.on) only ever reference --accent-1, and
   .chip.on's background was a Neon-Casino-specific hardcoded violet literal
   that leaked into every pack unchanged -- so Lisa Frank read as pink-only
   despite defining a full pastel-rainbow palette. This overrides pull
   --accent-2 (cyan) and --accent-3 (yellow) into a visible, structural spot
   instead of leaving them as inert unused token slots for this pack.

   No separate .botcard border-image rule here (there used to be one,
   removed 2026-08-14 follow-up #3): .botcard is NEVER used without .card
   in this app's markup (see render/card.js, render/bots.js -- always
   class="card botcard"), so a second border-image rule on the same
   element just fights the .card rainbow-trim rule above for which single
   gradient paints all four sides -- whichever wins ends up rendering a
   3-stop gradient across the OTHER two sides' 1px edges too, which
   anti-aliases down to a muddy near-black-maroon blend at that thinness.
   The .card rule already gives every bot card a full rainbow-trimmed
   border; no extra rule needed. */
[data-theme="lisa-frank"] .chip.on{
  background:linear-gradient(90deg,rgba(34,211,238,.25),rgba(250,204,21,.25));
  border-color:var(--accent-2);color:var(--text);
}