/* InfoSlips Quizathon 2026 — shared brand styles (dark by default, light via [data-theme="light"]) */
@font-face{font-family:'Inter';src:url('fonts/inter-latin-wght-normal.woff2') format('woff2');font-weight:100 900;font-display:swap}

:root{
  /* Brand palette */
  --green:#4EAF60; --green-med:#277656; --green-dark:#1D5941; --acorn:#80D100; --lime:#DBE64C;
  --white:#FFFFFF; --n1:#F8F8F8; --n2:#F5F5F5;
  --s1:#0F172A; --s2:#334155; --s3:#64748B; --s4:#94A3B8; --s5:#CBD5E1; --s6:#E2E8F0; --s7:#F1F5F9;
  --radius:14px;

  /* Semantic tokens — DARK (default) */
  color-scheme:dark;
  --bg:var(--s1);            /* page */
  --header-bg:var(--s1);     /* must match the DarkBG logo background */
  --surface:rgba(255,255,255,.04);
  --surface-2:var(--s2);
  --border:var(--s2);
  --text-strong:var(--white);
  --text:var(--s5);
  --muted:var(--s4);
  --faint:var(--s3);
  --accent:var(--green);
  --highlight:var(--lime);   /* year, timer, key numbers */
  --eyebrow:var(--acorn);
  --link:var(--green);
  --btn-bg:var(--green); --btn-fg:var(--s1); --btn-hover:var(--acorn);
  --btn2-fg:var(--white); --btn2-hover:rgba(255,255,255,.06);
  --input-bg:var(--s1);
  --chip-bg:var(--s2); --chip-fg:var(--white);
  --tile-bg:var(--green-dark); --tile-fg:var(--white); --tile-key-bg:var(--lime); --tile-key-fg:var(--s1);
  --selected-bg:var(--green-med); --selected-fg:var(--white);
  --correct-bg:var(--green); --correct-fg:var(--s1); --correct-ring:var(--lime);
}
:root[data-theme="light"]{
  color-scheme:light;
  --bg:var(--n2);
  --header-bg:var(--white);  /* must match the LightBG logo background */
  --surface:var(--white);
  --surface-2:var(--s7);
  --border:var(--s6);
  --text-strong:var(--s1);
  --text:var(--s2);
  --muted:var(--s3);
  --faint:var(--s4);
  --highlight:var(--green);
  --eyebrow:var(--green-med);
  --link:var(--green-med);
  --btn-bg:var(--green-med); --btn-fg:var(--white); --btn-hover:var(--green-dark);
  --btn2-fg:var(--s1); --btn2-hover:var(--s7);
  --input-bg:var(--white);
  --chip-bg:var(--s7); --chip-fg:var(--s2);
  --tile-bg:var(--s7); --tile-fg:var(--s1); --tile-key-bg:var(--green); --tile-key-fg:var(--s1);
  --correct-ring:var(--green-dark);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;font-family:Inter,Arial,system-ui,sans-serif;font-size:16px;line-height:1.45;color:var(--text);background:var(--bg);transition:background .2s,color .2s}
h1,h2,h3{color:var(--text-strong);line-height:1.1;margin:0 0 .4em}
h1{font-size:36px;font-weight:700} h2{font-size:28px;font-weight:700} h3{font-size:22px;font-weight:600}
a{color:var(--link);font-weight:600}
[hidden]{display:none!important}

/* Logos: approved artwork, one per theme */
.logo{display:block;width:auto;height:40px}
.logo-on-light{display:none}
:root[data-theme="light"] .logo-on-dark{display:none}
:root[data-theme="light"] .logo-on-light{display:block}

/* Brand header */
.brandbar{display:flex;align-items:center;gap:14px;padding:10px 16px 10px 8px;background:var(--header-bg);border-bottom:4px solid var(--accent)}
.brandbar .event{margin-left:auto;text-align:right}
.eyebrow{display:block;font-size:12px;font-weight:600;letter-spacing:3px;text-transform:uppercase;color:var(--muted)}
.event-name{font-weight:800;font-size:20px;color:var(--text-strong);letter-spacing:-.01em}
.event-name b{color:var(--highlight)}

/* Theme toggle */
.theme-toggle{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:50%;border:1px solid var(--border);background:transparent;color:var(--text-strong);cursor:pointer;padding:0}
.theme-toggle:hover{background:var(--btn2-hover)}
.theme-toggle:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.theme-toggle svg{width:20px;height:20px}
.theme-toggle .i-moon{display:none}
:root[data-theme="light"] .theme-toggle .i-sun{display:none}
:root[data-theme="light"] .theme-toggle .i-moon{display:block}

/* Cards */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:22px;margin:16px 0}
.caption{font-size:14px;font-weight:500;color:var(--muted)}
.small{font-size:12px;font-weight:500;color:var(--faint)}

/* Form controls */
input{font:inherit;width:100%;padding:14px 16px;border:1px solid var(--border);border-radius:12px;background:var(--input-bg);color:var(--text-strong)}
input::placeholder{color:var(--faint)}
input:focus{outline:3px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.btn{font:inherit;font-weight:700;border:0;border-radius:12px;padding:13px 20px;cursor:pointer;background:var(--btn-bg);color:var(--btn-fg);transition:background .15s}
.btn:hover{background:var(--btn-hover)}
.btn:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
.btn.secondary{background:transparent;color:var(--btn2-fg);border:1px solid var(--border)}
.btn.secondary:hover{background:var(--btn2-hover)}
.btn:disabled{opacity:.45;cursor:default}

/* Status pill */
.pill{display:inline-block;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;background:var(--chip-bg);color:var(--chip-fg)}
.pill.live{background:var(--green);color:var(--s1)}
.pill.locked{background:var(--text-strong);color:var(--bg)}
.pill.reveal{background:var(--lime);color:var(--s1)}

/* Leaderboard rows */
.lb{list-style:none;margin:0;padding:0}
.lb li{display:flex;align-items:center;gap:12px;padding:10px 4px;border-bottom:1px solid var(--border)}
.lb li:last-child{border-bottom:0}
.lb .rank{flex:none;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-weight:700;font-size:14px;background:var(--chip-bg);color:var(--chip-fg)}
.lb li:first-child .rank{background:var(--green);color:var(--s1)}
.lb .name{flex:1;font-weight:600;color:var(--text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lb .pts{font-weight:700;color:var(--text-strong);font-variant-numeric:tabular-nums}
.lb .me .name{color:var(--link)}
.empty{color:var(--faint);font-size:14px}