/* ============================================================
   MixNight — design tokens & themes (single source of truth)
   Used by: index.html (Pour), bar/index.html (The Bar), and every module.

   Type
   Type  (21 Sep — the same two faces on every theme, self-hosted in shared/fonts/. Unbounded was tried for display and dropped the same day.)
     --sans     UI face                       Onest 400/500/600/700
     --display  wordmark, titles              Onest too: headings --display-weight (700), wordmark/hero --display-heavy (800), tight tracking
     --serif    legacy alias of --display, kept for Pour's stylesheet
     --mono     clock, durations, scores, counts   Martian Mono (variable width; big scores at --mono-wide, weight 800)

   Colour  (surfaces go bg → bg2 → card → card2, dark to less dark)
     --txt / --dim / --dim2        text, secondary, tertiary
     --line / --line2              hairlines, stronger hairlines
     --accent / --accent-ink       the one brand colour and the text that sits on it
     --accent2                     a second colour for highlights, never for buttons
     --gold / --gold2              legacy aliases of --accent / --accent2 (Pour)
     --green / --red               semantic
   ============================================================ */

/* ---------- faces: self-hosted variable woff2 (latin), no CDN — works offline on the LAN and on the Fire Stick ---------- */
@font-face{font-family:"Onest";src:url("fonts/onest-latin.woff2") format("woff2");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:"Martian Mono";src:url("fonts/martian-mono-latin.woff2") format("woff2");font-weight:100 800;font-stretch:75% 112.5%;font-style:normal;font-display:swap}

:root{
  /* ---------- NOIR (default) — black, white-on-black actions, one warm neutral ---------- */
  --bg:#0a0a0a; --bg2:#0f0f0f; --card:#151515; --card2:#1d1d1d;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.14);
  --txt:#f5f5f3; --dim:#9c9c98; --dim2:#5f5f5b;
  /* ---------- surfaces without outlines (22 Sep, phone first): three tone steps mixed from the text colour so every theme inherits them.
     surface-1 raised (Dock, sheets, modal) · surface-2 tonal (buttons, chips, inputs) · surface-3 pressed / selected. Hairlines only inside lists. ---------- */
  --surface-1:color-mix(in srgb,var(--txt) 6%,var(--bg));
  --surface-2:color-mix(in srgb,var(--txt) 9%,transparent);
  --surface-3:color-mix(in srgb,var(--txt) 15%,transparent);
  --scrim:rgba(0,0,0,.55);
  /* ---------- motion (one system: enters ease out, exits ease in, one spring for "added") ---------- */
  --dur-1:90ms;  --dur-2:160ms; --dur-3:240ms; --dur-4:420ms; --dur-5:900ms;
  --ease-out:cubic-bezier(.2,.8,.2,1); --ease-in:cubic-bezier(.4,0,1,1); --ease-spring:cubic-bezier(.34,1.3,.5,1);
  --accent:#f5f5f3; --accent-ink:#0a0a0a; --accent2:#c8c8c4;
  --pink:#ff5c8a; --green:#3ecf8e; --red:#ff5d5d;
  --grad:linear-gradient(135deg,#ffffff 0%,#d9d9d5 100%);
  --rad:0; --rad-lg:0;   /* MixNight is square-edged: only switches and status dots stay round */
  --sans:"Onest",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --display:var(--sans);
  --mono:"Martian Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --display-weight:700; --display-heavy:800; --display-track:-0.025em; --display-heavy-track:-0.035em;
  --mono-wide:112.5%;   /* font-stretch for the big darts scores */
  --bg-ambient:none;
  --shadow:0 20px 60px rgba(0,0,0,.5);
  --img-grade:none;
  /* legacy aliases for Pour */
  --gold:var(--accent); --gold2:var(--accent2); --serif:var(--display);
  color-scheme:dark;
}

/* ---------- NEON — after-hours: near-black violet, hot pink + cyan ---------- */
html[data-theme="neon"]{
  --bg:#07060c; --bg2:#0c0a14; --card:#120f1e; --card2:#1a162b;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.16);
  --txt:#f6f3ff; --dim:#a39bc4; --dim2:#625b82;
  --accent:#ff3ea5; --accent-ink:#14061a; --accent2:#38e8ff;
  --pink:#ff3ea5;
  --grad:linear-gradient(135deg,#ff3ea5 0%,#38e8ff 100%);
  --rad:0; --rad-lg:0;   /* MixNight is square-edged: only switches and status dots stay round */
  --bg-ambient:radial-gradient(800px 420px at 20% -10%,rgba(255,62,165,.14),transparent 60%),radial-gradient(800px 420px at 90% 110%,rgba(56,232,255,.10),transparent 60%);
  --img-grade:saturate(1.25) contrast(1.05) hue-rotate(-6deg);
}

/* ---------- GOLD — true black, bright gold, champagne second. Replaced Speakeasy 21 Sep (no brown tint, no sepia); saved "speakeasy" lands here ---------- */
html[data-theme="gold"], html[data-theme="speakeasy"]{
  --bg:#070605; --bg2:#0c0b09; --card:#13110d; --card2:#1c1913;
  --line:rgba(232,190,90,.10); --line2:rgba(232,190,90,.24);
  --txt:#f6f1e6; --dim:#a89f8d; --dim2:#6a6252;
  --accent:#e8b94a; --accent-ink:#140e02; --accent2:#f3dfae;
  --grad:linear-gradient(135deg,#f6d77a 0%,#c8922a 100%);
  --bg-ambient:radial-gradient(900px 480px at 50% -12%,rgba(232,185,74,.10),transparent 60%);
  --img-grade:saturate(.9) contrast(1.05);
}

/* ---------- LASER — black, acid lime, violet second. Replaced Pub 21 Sep; saved "pub" / "irish" land here ---------- */
html[data-theme="laser"], html[data-theme="pub"], html[data-theme="irish"]{
  --bg:#060708; --bg2:#0a0c0d; --card:#101314; --card2:#181c1d;
  --line:rgba(255,255,255,.07); --line2:rgba(200,255,80,.22);
  --txt:#f4f7ee; --dim:#9aa39a; --dim2:#5c645c;
  --accent:#c6ff3d; --accent-ink:#0c1400; --accent2:#a67bff;
  --green:#c6ff3d;
  --grad:linear-gradient(135deg,#c6ff3d 0%,#a67bff 100%);
  --bg-ambient:radial-gradient(800px 420px at 15% -10%,rgba(198,255,61,.10),transparent 60%),radial-gradient(800px 420px at 95% 110%,rgba(166,123,255,.12),transparent 60%);
  --img-grade:saturate(1.15) contrast(1.05);
}

/* ---------- SUNSET — deep plum, hot orange, magenta second ---------- */
html[data-theme="sunset"]{
  --bg:#0b0610; --bg2:#110a17; --card:#181021; --card2:#22172e;
  --line:rgba(255,255,255,.07); --line2:rgba(255,140,80,.24);
  --txt:#fff4ec; --dim:#b9a3b4; --dim2:#6f5c70;
  --accent:#ff7a2f; --accent-ink:#1a0a02; --accent2:#ff3d9a;
  --grad:linear-gradient(135deg,#ffb02f 0%,#ff3d9a 100%);
  --bg-ambient:radial-gradient(900px 460px at 85% -10%,rgba(255,122,47,.16),transparent 60%),radial-gradient(800px 420px at 5% 110%,rgba(255,61,154,.12),transparent 60%);
  --img-grade:saturate(1.2) contrast(1.04) hue-rotate(-4deg);
}

/* ---------- ELECTRIC — blue-black, electric blue, ice cyan second ---------- */
html[data-theme="electric"]{
  --bg:#05070d; --bg2:#080b14; --card:#0d121f; --card2:#141b2d;
  --line:rgba(255,255,255,.07); --line2:rgba(90,140,255,.28);
  --txt:#f1f5ff; --dim:#98a3c2; --dim2:#566082;
  --accent:#5b8cff; --accent-ink:#030a1f; --accent2:#5ef0ff;
  --grad:linear-gradient(135deg,#5b8cff 0%,#5ef0ff 100%);
  --bg-ambient:radial-gradient(900px 460px at 20% -10%,rgba(77,125,255,.18),transparent 60%),radial-gradient(700px 400px at 95% 110%,rgba(94,240,255,.08),transparent 60%);
  --img-grade:saturate(1.1) contrast(1.05);
}

/* ---------- DIVE — retired 15 Sep; maps to Neon (kept so saved settings don't break) ---------- */
html[data-theme="dive-retired"]{
  --bg:#0a0909; --bg2:#100e0e; --card:#171313; --card2:#1f1a1a;
  --line:rgba(255,255,255,.07); --line2:rgba(255,255,255,.15);
  --txt:#f3ede7; --dim:#a59c96; --dim2:#66605c;
  --accent:#ff4d3d; --accent-ink:#160707; --accent2:#3fa9d6;
  --red:#ff4d3d;
  --grad:linear-gradient(135deg,#ff5a3d 0%,#ff8a3d 100%);
  --bg-ambient:radial-gradient(700px 400px at 80% -10%,rgba(255,77,61,.12),transparent 60%);
}

/* ---------- theme swatches (settings pickers in every app) ---------- */
.sw-noir{--p-bg:#0a0a0a;--p-card:#1d1d1d;--p-acc:#f5f5f3;--p-txt:#9c9c98}
.sw-gold{--p-bg:#070605;--p-card:#1c1913;--p-acc:#e8b94a;--p-txt:#f3dfae}
.sw-neon{--p-bg:#07060c;--p-card:#1a162b;--p-acc:#ff3ea5;--p-txt:#38e8ff}
.sw-laser{--p-bg:#060708;--p-card:#181c1d;--p-acc:#c6ff3d;--p-txt:#a67bff}
.sw-sunset{--p-bg:#0b0610;--p-card:#22172e;--p-acc:#ff7a2f;--p-txt:#ff3d9a}
.sw-electric{--p-bg:#05070d;--p-card:#141b2d;--p-acc:#5b8cff;--p-txt:#5ef0ff}
/* theme switch cross-fades the surfaces */
html.theming, html.theming body, html.theming *{transition:background-color .4s ease,border-color .4s ease,color .4s ease!important}
.themecard .swatch{position:relative;height:56px;border-radius:0;background:var(--p-bg);border:1px solid rgba(255,255,255,.06);overflow:hidden}
.themecard .swatch::before{content:"";position:absolute;left:10px;top:10px;width:46%;height:10px;border-radius:5px;background:var(--p-card)}
.themecard .swatch::after{content:"";position:absolute;left:10px;bottom:10px;width:28px;height:14px;border-radius:7px;background:var(--p-acc);box-shadow:40px 0 0 -3px var(--p-txt)}

/* ---------- motion overrides: TVs get shorter, nothing overlapping; reduced motion keeps a 120ms crossfade so state changes still register ---------- */
html.tv{--dur-2:120ms;--dur-3:180ms;--dur-4:300ms}
@media (prefers-reduced-motion:reduce){:root{--dur-1:0ms;--dur-2:0ms;--dur-3:120ms;--dur-4:120ms;--dur-5:120ms}}