/* ============================================================
   TAZ Pinball — shared design system (single source of truth)
   Loaded by /, /predictions/, and /fantasy/ so the pages share one
   look and can't drift apart. Page-specific component CSS stays in
   each page and consumes these tokens.
   Canonical look: "clean sport" (cobalt #2f6bff / blue #5aa0ff /
   green #42d77d / coral #ff5a6e), Bebas Neue + DM Sans, dark default
   with a light toggle.
   ============================================================ */

/* ---- Canonical tokens: dark (default) ---- */
:root{
  --bg:#0a0c14; --bg-2:#11141f; --surface:#161a28; --surface-2:#1d2233; --surface-3:#28304a;
  --border:rgba(255,255,255,.08); --border-2:rgba(255,255,255,.14); --border-strong:rgba(255,255,255,.20);
  --text:#eef0fa; --text-dim:#a6abc4; --text-mute:#6b7194;
  --gold:#2f6bff; --gold-deep:#1e4fd6; --blue:#5aa0ff; --ok:#42d77d; --bad:#ff5a6e;
  --shadow:0 18px 48px rgba(0,0,0,.45); --radius:14px;
}
/* ---- Light toggle ---- */
:root[data-theme="light"]{
  --bg:#f4f2fb; --bg-2:#fff; --surface:#fff; --surface-2:#f0eef9; --surface-3:#e6e2f3;
  --border:rgba(20,15,40,.10); --border-2:rgba(20,15,40,.16); --border-strong:rgba(20,15,40,.28);
  --text:#191428; --text-dim:#4d4a63; --text-mute:#7b7894;
  --gold:#1e50d6; --gold-deep:#163fae; --blue:#2f6fe0; --ok:#1c9c54; --bad:#d23048;
  --shadow:0 18px 44px rgba(80,60,140,.16);
}

/* ---- Base typography (defensive defaults; pages may extend) ---- */
.site-base{font-family:'DM Sans',system-ui,sans-serif}
.num{font-variant-numeric:tabular-nums}

/* ---- Shared nav ---- */
.site-nav{position:sticky;top:0;z-index:100;background:color-mix(in srgb,var(--bg) 84%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--border)}
.site-nav-in{max-width:1180px;margin:0 auto;padding:0 22px;display:flex;align-items:center;gap:16px;height:60px;position:relative}
.site-brand{font-family:'Bebas Neue',sans-serif;font-size:24px;letter-spacing:3px;color:var(--text);text-decoration:none;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.site-brand::before{content:"";width:28px;height:28px;flex-shrink:0;background:url(/assets/icons/logo-mark.svg) center/contain no-repeat}
.site-brand span{color:var(--text)}
.site-links{display:flex;gap:2px;margin-left:auto;align-items:center}
.site-links a{font:500 14px 'DM Sans',system-ui,sans-serif;color:var(--text-dim);padding:8px 13px;border-radius:8px;text-decoration:none;transition:color .15s ease,background .15s ease;white-space:nowrap}
.site-links a:hover{color:var(--text);background:var(--surface)}
.site-links a.active{color:var(--gold)}
.site-theme-btn{width:38px;height:38px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-size:15px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:border-color .15s ease}
.site-theme-btn:hover{border-color:var(--border-strong)}
.site-hamb{display:none;width:40px;height:40px;border-radius:9px;border:1px solid var(--border-2);background:var(--surface);color:var(--text);font-size:20px;line-height:1;cursor:pointer;align-items:center;justify-content:center;flex-shrink:0}
.site-drop{display:none;position:absolute;top:60px;left:0;right:0;background:var(--bg-2);border-bottom:1px solid var(--border);box-shadow:var(--shadow);padding:10px 22px 16px;flex-direction:column;gap:2px;z-index:99}
.site-drop.open{display:flex}
.site-drop a{font:500 16px 'DM Sans',system-ui,sans-serif;color:var(--text-dim);padding:13px 12px;border-radius:8px;text-decoration:none}
.site-drop a:hover{background:var(--surface);color:var(--text)}
.site-drop a.active{color:var(--gold)}
@media(max-width:760px){
  .site-links{display:none}
  .site-hamb{display:inline-flex}
}

/* ---- Shared footer ---- */
.site-foot{border-top:1px solid var(--border);margin-top:48px;background:var(--bg)}
.site-foot-in{max-width:1180px;margin:0 auto;padding:30px 22px;display:flex;flex-wrap:wrap;gap:24px 40px;justify-content:space-between;align-items:flex-start}
.site-foot-brand{font-family:'Bebas Neue',sans-serif;font-size:20px;letter-spacing:2px;color:var(--gold)}
.site-foot-brand span{color:var(--text)}
.site-foot-tag{font:400 13px 'DM Sans',system-ui,sans-serif;color:var(--text-mute);margin-top:4px}
.site-foot-links{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center}
.site-foot-links a{font:500 13px 'DM Sans',system-ui,sans-serif;color:var(--text-dim);text-decoration:none;transition:color .15s ease}
.site-foot-links a:hover{color:var(--text)}

/* ---- Shared buttons ---- */
.site-btn{font:600 14px 'DM Sans',system-ui,sans-serif;display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:10px;border:1px solid transparent;cursor:pointer;text-decoration:none;transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease}
.site-btn-primary{background:linear-gradient(135deg,var(--gold),var(--gold-deep));color:#fff;box-shadow:0 8px 24px rgba(47,107,255,.30)}
.site-btn-primary:hover{transform:translateY(-2px)}
.site-btn-ghost{background:var(--surface);border-color:var(--border-2);color:var(--text)}
.site-btn-ghost:hover{border-color:var(--blue)}

/* ---- Accessibility: honor reduced-motion across every page ---- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms!important;animation-iteration-count:1!important;
    transition-duration:.001ms!important;scroll-behavior:auto!important;
  }
}