/* Camp Champ shared design system — tokens, reset, and cross-page components. Dark is the default theme; [data-theme="light"] on overrides it (see theme.js — it sets that attribute before paint based on localStorage). Color identity (settled 2026-09-08 after an A/B test between a pure navy/steel theme and a charcoal+turf-green one): charcoal background, with a navy-blue --gold as the primary/brand accent everywhere (nav links, headings, selection states). --pine stays green on purpose -- it's the semantic win/loss color in tables and division-name headers, independent of whichever color is playing "brand accent". */ :root{ --bg:#151815; --bg-raised:#1D211D; --bg-sunken:#0F110F; --line:#2B302A; --ink:#EDF0EA; --muted:#99A692; --faint:#667061; --gold:#7FB2E0; --gold-tint:rgba(127,178,224,.16); --pine:#3FA76B; --pine-tint:rgba(63,167,107,.16); --brick:#E2795F; --brick-tint:rgba(226,121,95,.16); --shadow: 0 1px 2px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.35); /* Fixed brand constant -- deliberately NOT redefined in the light-theme block below, so it never shifts with the theme toggle. */ --football: #8B4A2B; } :root[data-theme="light"]{ --bg:#F4F5F0; --bg-raised:#FFFFFF; --bg-sunken:#E8EAE3; --line:#D7DBD0; --ink:#161A17; --muted:#5B6660; --faint:#8B968D; --gold:#2E6DA4; --gold-tint:#DCE9F5; --pine:#276B47; --pine-tint:#DCEDE1; --brick:#9B3F2C; --brick-tint:#F3DCD4; --shadow: 0 1px 2px rgba(20,30,20,.06), 0 6px 20px rgba(20,30,20,.05); } *{box-sizing:border-box} html,body{margin:0;padding:0} body{ background:var(--bg);color:var(--ink); font-family:"IBM Plex Sans",system-ui,-apple-system,sans-serif; font-size:15px;line-height:1.6; -webkit-font-smoothing:antialiased; } .tnum{font-variant-numeric:tabular-nums;font-family:"IBM Plex Mono",monospace} h1,h2,h3{font-family:"Big Shoulders Display","Arial Narrow",sans-serif;text-wrap:balance;letter-spacing:.01em;margin:0} a{color:inherit} button{font-family:inherit} ::selection{background:var(--gold-tint);color:var(--ink)} /* ---------- Global top nav (identical on every page) ---------- */ .site-nav{ display:flex;align-items:center;gap:20px; padding:12px 24px;background:var(--bg-sunken); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:20; } .brand-mark{display:flex;align-items:center;gap:9px;text-decoration:none;color:var(--ink);font-weight:700;margin-right:auto} .brand-mark .ball{width:20px;height:20px;color:var(--football);flex:none} .brand-mark span{font-family:"Big Shoulders Display",sans-serif;font-size:19px;letter-spacing:.02em;line-height:1} .site-links{display:flex;gap:4px} .site-links a{ padding:8px 14px;border-radius:7px;text-decoration:none; font-size:13px;font-weight:600;color:var(--muted); } .site-links a:hover{color:var(--ink);background:var(--bg-raised)} .site-links a.active{color:var(--gold);background:var(--gold-tint)} .theme-toggle{ display:flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:8px; background:var(--bg-raised);border:1px solid var(--line);color:var(--muted); cursor:pointer;flex:none; } .theme-toggle:hover{color:var(--gold);border-color:var(--gold)} .theme-toggle svg{width:17px;height:17px} .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} @media (max-width:640px){ .site-nav{padding:10px 14px;gap:12px} .brand-mark span{display:none} .site-links a{padding:7px 10px;font-size:12px} } /* ---------- Shared components ---------- */ .pill{display:inline-block;padding:1px 8px;border-radius:20px;font-size:10.5px;font-weight:700;letter-spacing:.02em;background:var(--bg-sunken);color:var(--faint)} .pill.win,.pill.pine,.pill.hot{background:var(--pine-tint);color:var(--pine)} .pill.loss,.pill.brick,.pill.cold{background:var(--brick-tint);color:var(--brick)} .pill.gold{background:var(--gold-tint);color:var(--gold)} .pill.flat{background:var(--bg-sunken);color:var(--muted)} .table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px;background:var(--bg-raised);box-shadow:var(--shadow)} table{border-collapse:collapse;width:100%} thead th{ background:var(--bg-sunken);text-align:left;padding:9px 12px; font-size:10.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted); border-bottom:1px solid var(--line);white-space:nowrap;font-weight:600; } tbody td{padding:8px 12px;border-bottom:1px solid var(--line);white-space:nowrap} tbody tr:last-child td{border-bottom:none} td.name{font-family:"IBM Plex Sans";font-weight:600;white-space:normal;overflow-wrap:anywhere} .section-head{margin-bottom:16px} .section-head .eyebrow{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold);font-weight:600} .section-head h2{font-size:28px;margin-top:4px} .section-head p{color:var(--muted);font-size:13px;margin-top:8px;max-width:68ch} .stat-card{background:var(--bg-raised);border:1px solid var(--line);border-radius:10px;padding:16px 18px;box-shadow:var(--shadow)} .stat-card .label{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:var(--muted);font-weight:600} .stat-card .value{font-family:"Big Shoulders Display";font-size:26px;font-weight:700;margin-top:4px;line-height:1} .stat-card .value .unit{font-size:14px;color:var(--muted);font-weight:600;margin-left:4px} .stat-card .sub{font-size:12px;color:var(--faint);margin-top:5px} .stat-card.gold{border-color:var(--gold);background:linear-gradient(180deg,var(--gold-tint),var(--bg-raised) 70%)} .stat-card.brick{border-color:var(--brick)}