/* Statswish design system
*
* Imported from the "Statswish Basketball UI Mockups" Claude Design project
* (ffabe275-b0ec-4eae-8ce3-6005b11500eb, Statswish.dc.html).
*
* Dark is the default theme. Light activates via `data-theme="light"` on .
*
* For faster first paint, drop the @import below and put these in instead:
*
*
*/
@import url("https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@500;600;700;800&family=IBM+Plex+Sans:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500;600&display=swap");
/* ---- Tokens: dark (default) ---------------------------------------- */
:root {
/* surfaces */
--bg: #0a0b0e;
--shell: #0d0f13;
--bar: #0f1116;
--bar2: #12151b;
--boxbg: #0b0d11;
--chip: #14171d;
--hov: #15181e;
--tkhov: #171a20;
--shot: #101318;
--orsoft: #14161c;
/* rules and borders */
--grid: #171b21;
--line: #191d24;
--edge: #1c2027;
--bd: #23272f;
--bd2: #2a303a;
/* text, brightest to faintest */
--ink: #f2f4f7;
--ink2: #dfe4ec;
--ink3: #b9c1cd;
--ink4: #cfd6e0;
--mute: #a8b0bc;
--mute2: #8c94a1;
--k: #7f8794;
--k2: #727a87;
--dim: #6b7280;
--dim2: #5f6773;
--dim3: #565e6b;
--off: #525a67;
--off2: #4d5461;
--pipoff: #242a33;
--faint: #3d4450;
/* accent + status */
--or: #ff5b1a;
--or2: #ff7a45;
--or3: #ff8b5e;
--pos: #5ddc9a;
--neg: #ff6b6b;
/* accent washes — see note in the header comment */
--orwash: rgba(255, 91, 26, .10);
--orline: rgba(255, 91, 26, .40);
--flash: rgba(255, 91, 26, .28);
--scrim: rgba(0, 0, 0, .55);
}
/* ---- Tokens: light -------------------------------------------------- */
html[data-theme=light] {
--bg: #e6e8ec;
--shell: #ffffff;
--bar: #f5f6f9;
--bar2: #f0f2f6;
--boxbg: #fbfcfd;
--chip: #edeff4;
--hov: #f2f4f8;
--tkhov: #eff1f5;
--shot: #f4f6f9;
--orsoft: #fff3ea;
--grid: #e3e6ec;
--line: #e7e9ef;
--edge: #d5d8e0;
--bd: #dcdfe6;
--bd2: #c3c8d1;
--ink: #11141a;
--ink2: #23272f;
--ink3: #3d4450;
--ink4: #2a303a;
--mute: #4e5563;
--mute2: #616a78;
--k: #6b7280;
--k2: #6b7280;
--dim: #6b7280;
--dim2: #7a818e;
--dim3: #868d99;
--off: #aab0bb;
--off2: #a2a8b4;
--pipoff: #d8dbe2;
--faint: #b9bec8;
--or: #dd4708;
--or2: #bd3d05;
--or3: #b8420b;
--pos: #0f8a52;
--neg: #cf3535;
--orwash: rgba(221, 71, 8, .10);
--orline: rgba(221, 71, 8, .40);
--flash: rgba(221, 71, 8, .28);
--scrim: rgba(30, 34, 42, .42);
}
/* ---- Base ----------------------------------------------------------- */
html, body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: "IBM Plex Sans", system-ui, sans-serif;
-webkit-font-smoothing: antialiased;
}
a { color: var(--or); text-decoration: none }
a:hover { color: var(--or2) }
::selection { background: rgba(255, 91, 26, .35) }
:focus-visible { outline: 2px solid var(--or); outline-offset: 2px }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer }
/* ---- Type utilities -------------------------------------------------- */
/* display: condensed, heavy — scores, team tricodes, headings */
.d {
font-family: "Saira Condensed", Impact, sans-serif;
font-weight: 800;
letter-spacing: .01em;
}
/* mono, tabular — clocks, stat lines, status labels */
.m {
font-family: "IBM Plex Mono", ui-monospace, monospace;
font-variant-numeric: tabular-nums;
}
/* tabular numerals in the sans face */
.n { font-variant-numeric: tabular-nums }
/* kicker: small uppercase label */
.k {
font-size: 10px;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--k);
}
/* ---- Stat tables ------------------------------------------------------ */
.t { width: 100%; border-collapse: collapse }
.t th {
font: 600 9.5px/1 "IBM Plex Sans", sans-serif;
letter-spacing: .14em;
text-transform: uppercase;
color: var(--k2);
text-align: right;
padding: 8px 9px;
border-bottom: 1px solid var(--bd2);
white-space: nowrap;
}
.t th:first-child { text-align: left }
.t td {
font-family: "IBM Plex Mono", monospace;
font-size: 12.5px;
font-variant-numeric: tabular-nums;
text-align: right;
padding: 7px 9px;
border-bottom: 1px solid var(--line);
color: var(--ink2);
white-space: nowrap;
}
.t td:first-child {
text-align: left;
font-family: "IBM Plex Sans", sans-serif;
font-size: 13px;
font-weight: 500;
color: var(--ink);
}
.t tbody tr:hover td { background: var(--chip) }
/* .tl — left-align every column (used for play-by-play) */
.t.tl th, .t.tl td { text-align: left }
.t.tl th:not(:first-child), .t.tl td:not(:first-child) { padding-right: 16px }
/* ---- Interaction ------------------------------------------------------ */
.hov:hover { background: var(--hov) }
.tk:hover { background: var(--tkhov) }
/* scrollable region with themed scrollbars */
.sc::-webkit-scrollbar { height: 8px; width: 8px }
.sc::-webkit-scrollbar-thumb { background: var(--bd2) }
.sc::-webkit-scrollbar-track { background: var(--bar) }
/* ---- Motion ----------------------------------------------------------- */
/* hwp — pulsing "live" dot */
@keyframes hwp {
0%, 100% { opacity: 1; transform: scale(1) }
50% { opacity: .2; transform: scale(.72) }
}
/* hwflash — one-shot accent flash on a score change; apply .fl to trigger */
@keyframes hwflash {
0% { background: var(--flash) }
100% { background: transparent }
}
.fl { animation: hwflash .9s ease-out }