/* ============================================================
   Like That — brand system (v1, dark broadsheet/street hybrid)
   Injected site-wide by the server (see _inject_theme in
   backend/main.py), AFTER each page's own styles.

   CONTRACT (do not break):
   - This file NEVER (re)defines the site-config CSS custom
     properties (--bg --bg2 --surface --border --text --text-muted
     --red --gold --white --win --serif --sans --head-weight).
     Those are owned by <style id="lt-theme"> injected from
     _DEFAULT_SITE_CONFIG / the admin's saved Site Studio config.
     Everything here CONSUMES them via var(--x, fallback).
   - --win (#2F9E44 green) is the SANCTIONED functional color for
     correct/win states in the games — it stays green on purpose
     (correct-vs-present must not both read gold). Loss=red,
     push=gold. Recolor games only through these tokens.
   - New tokens/classes introduced here are all --lt-* / .lt-* so
     nothing collides with page CSS or JS-emitted class names.

   FONTS: self-hosted woff2 in /static/fonts/ (~120KB total).
   Anton = display, Archivo = body/UI, JetBrains Mono = data.
   The 'Playfair Display' / 'Inter' @font-face ALIASES below are
   deliberate: dozens of pages (and some JS-emitted inline styles)
   still say those family names — the aliases resolve them to the
   new brand faces without touching a single template literal.
   Remove an alias only after no page references that name.
   ============================================================ */

/* ---- real faces ---- */
@font-face{font-family:'Anton';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/anton-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:100 500;font-display:swap;
  src:url('/static/fonts/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:501 650;font-display:swap;
  src:url('/static/fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:651 750;font-display:swap;
  src:url('/static/fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Archivo';font-style:normal;font-weight:751 900;font-display:swap;
  src:url('/static/fonts/archivo-latin-900-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:100 500;font-display:swap;
  src:url('/static/fonts/jetbrains-mono-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'JetBrains Mono';font-style:normal;font-weight:501 900;font-display:swap;
  src:url('/static/fonts/jetbrains-mono-latin-700-normal.woff2') format('woff2')}

/* ---- legacy-name aliases (brand net for unmigrated references) ---- */
@font-face{font-family:'Playfair Display';font-style:normal;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/anton-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Playfair Display';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/anton-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:100 500;font-display:swap;
  src:url('/static/fonts/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:501 650;font-display:swap;
  src:url('/static/fonts/archivo-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:651 750;font-display:swap;
  src:url('/static/fonts/archivo-latin-700-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:italic;font-weight:100 900;font-display:swap;
  src:url('/static/fonts/archivo-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:751 900;font-display:swap;
  src:url('/static/fonts/archivo-latin-900-normal.woff2') format('woff2')}

/* ---- brand-only tokens (additive; site vars stay untouched) ---- */
:root{
  --lt-disp:'Anton','Arial Narrow',sans-serif;
  --lt-body:'Archivo','Helvetica Neue',Arial,sans-serif;
  --lt-mono:'JetBrains Mono',ui-monospace,Menlo,monospace;
  --lt-serif:Georgia,'Times New Roman',serif;
  --lt-stroke:var(--white,#F5F2EE);
  --lt-shadow:var(--red,#C8102E);      /* hard offset shadow = red on dark */
  --lt-hl:var(--gold,#D4AF37);
  --lt-hl-ink:#111;
  --lt-hair:var(--border,#2C2C2C);
}

/* ---- opt-in flat canvas: pages add <html class="lt-flat"> in their
       reskin wave to disable lt-premium.css's drifting glow layer ---- */
html.lt-flat, html.lt-flat body{background:var(--bg,#111) !important}
html.lt-flat body::before{display:none !important; animation:none !important}
/* the premium .lt-hero ships a spinning rainbow conic-gradient orb (::before)
   + sheen (::after) + purple glow shadow — kill them on flat pages and give the
   hero a flat editorial surface so it matches the rest of the brand */
html.lt-flat .lt-hero{background:var(--surface,#161616) !important;
  border:1px solid var(--border,#2a2a2a) !important; border-radius:4px !important;
  box-shadow:none !important}
html.lt-flat .lt-hero::before, html.lt-flat .lt-hero::after{display:none !important}

/* ---- light/dark toggle (built by /lt-theme.js, mounted in .nav-right) ----
   Square to match the brand; consumes theme vars so it recolors in both modes.
   The palette override itself lives in <style id="lt-theme"> (see _inject_theme)
   to keep this file free of site-config var (re)definitions. */
.lt-theme-toggle{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;padding:0;border:1px solid var(--border,#2C2C2C);
  background:transparent;color:var(--text,#E8E4E0);cursor:pointer;
  font-size:1rem;line-height:1;border-radius:2px;
  transition:border-color .18s ease,color .18s ease,background .18s ease}
.lt-theme-toggle:hover{border-color:var(--gold,#D4AF37);color:var(--gold,#D4AF37)}
.lt-theme-toggle .lt-tt-ico{display:block;transform:translateY(-1px)}
.lt-theme-toggle.in-nav{margin-right:.55rem;flex:0 0 auto}
/* mobile / no-nav: fixed pill in the empty top-right corner (right at the top) */
.lt-theme-toggle.floating{position:fixed;top:10px;right:12px;bottom:auto;z-index:1200;
  background:var(--surface,#1E1E1E);box-shadow:0 4px 14px rgba(0,0,0,.4)}
@media(max-width:640px){.lt-theme-toggle.floating{top:12px;right:12px}}

/* ---- primitives ---- */
.lt-disp{font-family:var(--lt-disp);font-weight:400;text-transform:uppercase;letter-spacing:.005em;line-height:.92}
.lt-mono{font-family:var(--lt-mono);font-variant-numeric:tabular-nums}
.lt-hl{background:var(--lt-hl);color:var(--lt-hl-ink);padding:.02em .16em;
  box-decoration-break:clone;-webkit-box-decoration-break:clone}
.lt-kicker{font-family:var(--lt-body);font-weight:700;text-transform:uppercase;
  font-size:.72rem;letter-spacing:.04em;color:var(--red,#C8102E)}
.lt-rule{height:3px;background:var(--lt-stroke);border:0}
.lt-dash{border:0;border-top:2px dashed var(--lt-hair)}

/* ---- ticker (street) ---- */
.lt-ticker{background:var(--red,#C8102E);color:#fff;overflow:hidden;white-space:nowrap;
  border-top:3px solid var(--lt-stroke);border-bottom:3px solid var(--lt-stroke)}
.lt-ticker .run{display:inline-block;padding:6px 0;font-family:var(--lt-disp);
  text-transform:uppercase;font-size:.82rem;letter-spacing:.02em}
.lt-ticker i{font-style:normal;margin:0 12px;color:var(--gold,#D4AF37)}

/* ---- display headings ---- */
.lt-h1{font-family:var(--lt-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(2.6rem,7vw,5.6rem);line-height:.86;letter-spacing:.002em;color:var(--text,#E8E4E0)}
.lt-h1 .box{background:var(--gold,#D4AF37);color:var(--lt-hl-ink);padding:.04em .1em;
  display:inline-block;transform:rotate(-1deg)}
.lt-h2{font-family:var(--lt-disp);font-weight:400;text-transform:uppercase;
  font-size:clamp(1.6rem,4vw,2.6rem);line-height:.92;color:var(--text,#E8E4E0)}
.lt-eyebrow{display:inline-block;background:var(--text,#E8E4E0);color:var(--bg,#111);
  font-family:var(--lt-body);font-weight:700;text-transform:uppercase;font-size:.72rem;
  letter-spacing:.05em;padding:5px 11px;transform:rotate(-1.5deg)}
.lt-pull{font-family:var(--lt-serif);font-style:italic;font-size:1.15rem;line-height:1.45;
  color:var(--text-muted,#888);border-left:4px solid var(--gold,#D4AF37);padding-left:.9rem}

/* ---- section header (broadsheet) ---- */
.lt-sec-h{display:flex;align-items:center;gap:.8rem;margin-bottom:1.2rem}
.lt-sec-h .n{font-family:var(--lt-disp);font-weight:400;text-transform:uppercase;
  font-size:1.7rem;letter-spacing:.005em;color:var(--text,#E8E4E0)}
.lt-sec-h .bar{flex:1;height:4px;background:var(--lt-stroke)}
.lt-sec-h .m{font-family:var(--lt-body);font-weight:700;text-transform:uppercase;
  font-size:.7rem;color:var(--text-muted,#888);letter-spacing:.04em}

/* ---- buttons ---- */
.lt-btn{font-family:var(--lt-disp);font-weight:400;text-transform:uppercase;font-size:.9rem;
  letter-spacing:.02em;padding:.68rem 1rem;border:2.5px solid var(--lt-stroke);
  background:var(--surface,#1E1E1E);color:var(--text,#E8E4E0);
  box-shadow:4px 4px 0 var(--lt-shadow);cursor:pointer;display:inline-block;text-decoration:none;
  transition:transform .12s,box-shadow .12s}
.lt-btn:hover{transform:translate(-1px,-1px);box-shadow:5px 5px 0 var(--lt-shadow)}
.lt-btn--red{background:var(--red,#C8102E);color:#fff}
.lt-btn--ghost{background:transparent;box-shadow:none}

/* ---- sticker card (street) ---- */
.lt-card{background:var(--surface,#1E1E1E);border:3px solid var(--lt-stroke);
  box-shadow:8px 8px 0 var(--lt-shadow)}
.lt-tag{display:inline-block;font-family:var(--lt-body);font-weight:800;text-transform:uppercase;
  font-size:.66rem;letter-spacing:.02em;padding:4px 9px;background:var(--text,#E8E4E0);color:var(--bg,#111)}
.lt-tag--red{background:var(--red,#C8102E);color:#fff}
.lt-tag--gold{background:var(--gold,#D4AF37);color:#111}
.lt-stamp{display:inline-block;background:var(--red,#C8102E);color:#fff;font-family:var(--lt-disp);
  font-weight:400;text-transform:uppercase;font-size:.86rem;padding:6px 11px;transform:rotate(5deg);
  border:2.5px solid var(--lt-stroke);box-shadow:3px 3px 0 var(--lt-shadow)}

/* ---- data: broadsheet table + tiles ---- */
.lt-table{width:100%;border-collapse:collapse;font-family:var(--lt-body);font-size:.85rem}
.lt-table th{font-weight:700;text-transform:uppercase;font-size:.62rem;letter-spacing:.06em;
  color:var(--text-muted,#888);text-align:right;padding:.4rem .5rem;border-bottom:2px solid var(--lt-stroke)}
.lt-table th:first-child,.lt-table td:first-child{text-align:left}
.lt-table td{text-align:right;padding:.42rem .5rem;color:var(--text-muted,#888);
  border-bottom:1px solid var(--lt-hair);font-variant-numeric:tabular-nums}
.lt-table td:first-child{color:var(--text,#E8E4E0)}
.lt-table .prob{font-family:var(--lt-mono);color:var(--gold,#D4AF37);font-weight:700}
.lt-tile{border:1px solid var(--lt-hair);background:var(--surface,#1E1E1E);padding:.9rem 1rem}
.lt-tile .l{font-family:var(--lt-mono);font-size:.6rem;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-muted,#888);margin-bottom:.4rem}
.lt-tile .v{font-family:var(--lt-disp);font-weight:400;font-size:2.2rem;line-height:.85;color:var(--text,#E8E4E0)}
.lt-tile .v small{font-size:1rem;color:var(--text-muted,#888)}
.lt-tile .s{font-family:var(--lt-body);font-weight:700;font-size:.7rem;color:var(--gold,#D4AF37);
  text-transform:uppercase;margin-top:.35rem}

/* ---- scoreboard row (model read) ---- */
.lt-score{display:flex;align-items:center;justify-content:space-between}
.lt-score .tile{width:34px;height:34px;display:grid;place-items:center;color:#fff;
  font-family:var(--lt-body);font-weight:800;font-size:.7rem;border:2px solid var(--lt-stroke)}
.lt-score .nm{font-family:var(--lt-disp);font-weight:400;text-transform:uppercase;font-size:1.25rem;color:var(--text,#E8E4E0)}
.lt-score .big{font-family:var(--lt-disp);font-weight:400;font-size:2.8rem;line-height:.9;color:var(--text,#E8E4E0)}
.lt-score .rec{font-family:var(--lt-mono);font-size:.64rem;color:var(--text-muted,#888)}

/* ---- mobile ---- */
@media (max-width:640px){
  .lt-h1{font-size:2.4rem}
  .lt-card{box-shadow:5px 5px 0 var(--lt-shadow)}
  .lt-btn{box-shadow:3px 3px 0 var(--lt-shadow);font-size:.82rem;padding:.6rem .85rem}
  .lt-tile .v{font-size:1.8rem}
}