/* DegenParty shared design system - dark + yellow quiz style.
Loaded on every page via . The
:root values here are the built-in defaults (the slate+yellow palette);
/branding.js overrides them at runtime with the admin's saved theme, so a
page looks right even before that fetch lands or if it fails.
Color tokens are admin-editable (Branding panel → palette). Shape/line tokens
are fixed. Canvas game art is NOT themed - it draws its own colors. */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap');
:root {
/* surfaces */
--bg: #181B22; /* page base */
--surface: #2A2F3A; /* cards, rows */
--raised: #333947; /* inputs, chips, progress track */
/* accent (actions / "you" only) */
--primary: #F0E14C;
--on-primary: #1B1F27; /* text on primary */
/* primary as raw "r, g, b" so pages can build translucent accent tints with
rgba(var(--accent-rgb), .18); branding.js keeps this in sync with --primary. */
--accent-rgb: 240, 225, 76;
/* buttons - a separate, editable colour so primary actions can be calmer than
the bright accent. Default to the accent; the Branding panel overrides. */
--button: #F0E14C;
--button-hover: #F3E873;
--on-button: #1B1F27;
/* feedback (answer states only) */
--success: #2FBE6E;
--danger: #E0524E;
/* text */
--text: #FFFFFF; /* headings */
--text-body: #E2E5EA; /* body */
--text-muted: #9AA0AC; /* secondary */
--text-faint: #6B7280; /* metadata, counters */
/* neutral overlays - flip with light/dark mode (see [data-mode="light"] below)
so borders, subtle fills and inputs stay visible on any background. */
--line: rgba(255,255,255,0.10); /* borders */
--soft: rgba(255,255,255,0.04); /* subtle neutral fill (chips/banners/rows) */
--soft-strong: rgba(255,255,255,0.10); /* hover / stronger neutral fill */
--field: rgba(0,0,0,0.30); /* input / select / textarea background */
/* fixed shape (not color) */
--radius: 12px;
--radius-lg: 16px;
--radius-pill: 999px;
/* legacy aliases so pages written against the old token names keep working.
/branding.js also re-points these at the live theme values at runtime. */
--brand-accent: var(--primary);
--accent: var(--primary);
--amber: var(--primary);
--panel: var(--surface);
--green: var(--success);
--red: var(--danger);
--muted: var(--text-muted);
}
/* Light mode: only the neutral overlays flip (the palette colours come from the
theme). branding.js sets data-mode on from the active theme's `mode`. */
:root[data-mode="light"] {
--line: rgba(0,0,0,0.14);
--soft: rgba(0,0,0,0.035);
--soft-strong: rgba(0,0,0,0.07);
--field: #ffffff;
}
/* ---- base ---------------------------------------------------------------- */
/* Opt-in body class so a page adopts the themed background + Poppins without
colliding with its own rules. Pages also just reference the var(--*) tokens. */
body.theme-base {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background: var(--bg);
color: var(--text-body);
margin: 0;
}
.theme-base h1, .theme-base h2, .theme-base h3 { color: var(--text); font-weight: 600; }
/* ---- native form controls (site-wide) ------------------------------------
Selects and - critically - their