/* tokens.css — "Glassmorphism": frosted, translucent panels floating over a vivid
   aurora. Depth comes from colour + backdrop-blur, not flat fills. Dark is primary
   (:root); the previous "Aurora Airy" light survives under [data-theme="light"].
   The blur itself is applied to panel classes at the bottom of this file. */
:root{
  --canvas:#080614;                              /* base under the aurora */
  --surface:rgba(255,255,255,.055);              /* frosted glass */
  --surface-2:rgba(255,255,255,.085);            /* raised glass */
  --elevated:rgba(26,22,52,.72);                 /* menus/modals — denser glass */
  --heading:#ffffff; --text:#e7eaf6; --muted:#aeb4cc; --muted-2:#7b8199;
  --accent:#8b7bff; --accent-strong:#ab9dff; --accent-ghost:rgba(139,123,255,.20); --on-accent:#0a081c;
  /* the aurora = drifting colour BLOBS over the --canvas base (two layers, see body::before/after).
     Blobs only (no base gradient) so the hue-rotate animation shifts only the spots, not the canvas. */
  --aurora:
    radial-gradient(50% 60% at 12% 8%, rgba(124,92,255,.55) 0%, rgba(124,92,255,0) 60%),
    radial-gradient(46% 55% at 88% 12%, rgba(56,189,248,.42) 0%, rgba(56,189,248,0) 60%),
    radial-gradient(55% 62% at 74% 96%, rgba(236,72,153,.36) 0%, rgba(236,72,153,0) 60%);
  --aurora-2:
    radial-gradient(48% 58% at 28% 82%, rgba(139,123,255,.42) 0%, rgba(139,123,255,0) 62%),
    radial-gradient(44% 52% at 82% 44%, rgba(56,189,248,.30) 0%, rgba(56,189,248,0) 62%),
    radial-gradient(42% 50% at 52% 18%, rgba(236,72,153,.24) 0%, rgba(236,72,153,0) 62%);
  --meter-fill:linear-gradient(90deg, #8b7bff, #38bdf8);
  --info:#5aa9ff; --info-soft:#5aa9ff; --warn:#ffbb55; --ok:#4ade80; --danger:#ff6b8a;
  --st-new:#aeb4cc; --st-wait:#5aa9ff; --st-dlg:#2dd4bf; --st-snz:#ffbb55;
  --st-won:#4ade80; --st-bad:#ff6b8a; --st-cold:#7b8199; --st-esc:#ff9457;
  --border:rgba(255,255,255,.14); --hairline:rgba(255,255,255,.08); --hairline-strong:rgba(255,255,255,.24);
  --glow:0 8px 32px rgba(8,6,26,.36);
  --glow-accent:0 10px 34px rgba(139,123,255,.42);
  --glow-lg:0 24px 64px rgba(5,3,18,.55);
  --inset-hairline:inset 0 1px 0 rgba(255,255,255,.12);
  --shadow-card:0 8px 32px rgba(6,4,22,.4), inset 0 1px 0 rgba(255,255,255,.10);
  --scrim:rgba(5,3,18,.6); --track:rgba(255,255,255,.10); --toggle-bg:rgba(255,255,255,.10); --gauge-glow-blur:8px;
  --bg-glow-1:transparent; --bg-glow-2:transparent;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; --sp-7:48px;
  --r-input:12px; --r-btn:12px; --r-badge:10px; --r-card:18px; --r-card-lg:22px; --r-pill:9999px;
  --font-ui:'Inter','SF Pro Text',system-ui,sans-serif;
  --font-display:'Inter Display','Inter',system-ui,sans-serif;
  --font-mono:'JetBrains Mono','SF Mono',ui-monospace,monospace;
  --fs-eyebrow:11px; --fs-xs:12.5px; --fs-sm:13.5px; --fs-base:15px;
  --fs-md:17px; --fs-lg:20px; --fs-xl:23px; --fs-2xl:28px; --fs-3xl:34px; --fs-4xl:44px;
  --lh-tight:1.15; --lh-body:1.5;
}
/* Light look — the SAME "Glassmorphism" identity as the dark :root (frosted glass floating
   over a purple/cyan/pink aurora, violet accent), rebalanced onto a light canvas: the panels
   become translucent WHITE frost, text goes dark, and the aurora keeps its hues but softened.
   (Replaces the older "Aurora Airy" green/teal light.) */
:root[data-theme="light"]{
  --canvas:#ece9f8;                              /* pale lavender base under the aurora */
  --surface:rgba(255,255,255,.58);              /* frosted white glass */
  --surface-2:rgba(255,255,255,.74);            /* raised glass */
  --elevated:rgba(255,255,255,.88);             /* menus/modals — denser glass */
  --heading:#141026; --text:#2c2a3d; --muted:#6a6880; --muted-2:#9a97ad;
  --accent:#6d5efc; --accent-strong:#5a49e8; --accent-ghost:rgba(109,94,252,.12); --on-accent:#ffffff;
  /* same drifting blobs as dark (violet/cyan/pink) but soft, over the pale --canvas base */
  --aurora:
    radial-gradient(50% 60% at 12% 8%, rgba(124,92,255,.32) 0%, rgba(124,92,255,0) 60%),
    radial-gradient(46% 55% at 88% 12%, rgba(56,189,248,.26) 0%, rgba(56,189,248,0) 60%),
    radial-gradient(55% 62% at 74% 96%, rgba(236,72,153,.22) 0%, rgba(236,72,153,0) 60%);
  --aurora-2:
    radial-gradient(48% 58% at 28% 82%, rgba(124,92,255,.24) 0%, rgba(124,92,255,0) 62%),
    radial-gradient(44% 52% at 82% 44%, rgba(56,189,248,.18) 0%, rgba(56,189,248,0) 62%),
    radial-gradient(42% 50% at 52% 18%, rgba(236,72,153,.16) 0%, rgba(236,72,153,0) 62%);
  --meter-fill:linear-gradient(90deg, #7c5cff, #2aa7e6);
  --info:#3b82f6; --info-soft:#2f6ae0; --warn:#c9791b; --ok:#16a34a; --danger:#e0455f;
  --st-new:#8a8aa0; --st-wait:#3b82f6; --st-dlg:#0d9488; --st-snz:#c9791b;
  --st-won:#16a34a; --st-bad:#e0455f; --st-cold:#8790a0; --st-esc:#ea6a1e;
  --border:rgba(20,16,38,.12); --hairline:rgba(20,16,38,.07); --hairline-strong:rgba(20,16,38,.20);
  --glow:0 8px 28px rgba(90,70,160,.14);
  --glow-accent:0 10px 30px rgba(109,94,252,.30);
  --glow-lg:0 24px 60px rgba(60,40,120,.20);
  --inset-hairline:inset 0 1px 0 rgba(255,255,255,.70);
  --shadow-card:0 8px 30px rgba(70,50,130,.12), inset 0 1px 0 rgba(255,255,255,.60);
  --scrim:rgba(30,20,60,.32); --track:rgba(20,16,38,.10); --toggle-bg:rgba(20,16,38,.10); --gauge-glow-blur:6px;
  --bg-glow-1:transparent; --bg-glow-2:transparent;
}
*{box-sizing:border-box}
body{margin:0;color:var(--text);font-family:var(--font-ui);
  font-size:var(--fs-sm);line-height:var(--lh-body);
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;
  background:var(--canvas);min-height:100vh}
/* the aurora backdrop = TWO blob layers that slowly WANDER (transform) and cycle COLOUR
   (hue-rotate) on different timings, so the spots drift organically and never sync. Panels frost
   over them. Soft edges come from the radial-gradient falloff (no blur filter → cheap to animate). */
body::before,body::after{content:'';position:fixed;inset:-30%;z-index:-1;pointer-events:none;
  background-repeat:no-repeat;background-size:cover;will-change:transform,filter}
body::before{background-image:var(--aurora);
  animation:aurora-drift-a 46s ease-in-out infinite alternate, aurora-hue 90s linear infinite}
body::after{background-image:var(--aurora-2);
  animation:aurora-drift-b 63s ease-in-out infinite alternate, aurora-hue 120s linear infinite reverse}
@keyframes aurora-drift-a{
  0%  {transform:translate(-5%,-3%) scale(1.08) rotate(-5deg)}
  100%{transform:translate(6%,5%)  scale(1.18) rotate(7deg)}}
@keyframes aurora-drift-b{
  0%  {transform:translate(5%,3%)  scale(1.16) rotate(4deg)}
  100%{transform:translate(-6%,-4%) scale(1.06) rotate(-6deg)}}
@keyframes aurora-hue{to{filter:hue-rotate(360deg)}}
h1,h2,h3{font-family:var(--font-display);color:var(--heading);letter-spacing:-.015em;margin:0;font-weight:600}
.eyebrow{font-family:var(--font-ui);font-size:var(--fs-eyebrow);letter-spacing:.02em;
  text-transform:uppercase;font-weight:600;color:var(--muted)}
:where(a,button,input,textarea,select,[tabindex]):focus-visible{
  outline:2px solid var(--accent);outline-offset:2px;border-radius:var(--r-input)}
.metric,.gauge,.stat,.num,table,.btime,.tm,td,th{font-variant-numeric:tabular-nums}
/* GLASS: frost the main panels over the aurora. Rows/pills stay flat tints to avoid
   double-blur. -webkit- for Safari. */
.card,.modal,.toast,.metric,.mchat,.mlist,.minfo,.mhead,.nav,.topbar,.hero,.attn,.fstage,.qrbox,.nextstep,.emojibar,.dg-step{
  -webkit-backdrop-filter:blur(20px) saturate(150%);
  backdrop-filter:blur(20px) saturate(150%);
}
@media (prefers-reduced-motion:reduce){*{animation-duration:.001ms!important;transition-duration:.001ms!important}}