/* ========================================================================== Kart DRL Arena — design tokens. Calm, premium, hand-set. No utility framework. Adaptive light + dark: JS stamps [data-theme] on (seeded from the system preference), and these token blocks drive every colour in ui.css. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,600;9..144,900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;600;700&display=swap'); :root, body[data-theme='light'] { --bg: #ece7df; --panel: rgba(255, 255, 255, 0.55); --panel-solid: #f3efe8; --border: rgba(40, 34, 28, 0.11); --border-strong: rgba(40, 34, 28, 0.2); --text: #34302b; --dim: #8a827a; --faint: rgba(52, 48, 43, 0.5); --accent: #a8674e; /* muted clay */ --accent-ink: #ffffff; --accent-soft: rgba(168, 103, 78, 0.14); --good: #5f7a4e; --warn: #b98a5e; --coin: #b78a2e; --shadow: 0 8px 30px rgba(40, 34, 28, 0.12); --shadow-sm: 0 2px 10px rgba(40, 34, 28, 0.07); } body[data-theme='dark'] { --bg: #14151a; --panel: rgba(30, 32, 40, 0.55); --panel-solid: #1b1d24; --border: rgba(255, 255, 255, 0.09); --border-strong: rgba(255, 255, 255, 0.2); --text: #e7e4dd; --dim: #9a968e; --faint: rgba(231, 228, 221, 0.45); --accent: #c58a5e; /* warm brass */ --accent-ink: #14151a; --accent-soft: rgba(197, 138, 94, 0.18); --good: #7f9b86; --warn: #c9a06a; --coin: #d9b23f; --shadow: 0 10px 34px rgba(0, 0, 0, 0.5); --shadow-sm: 0 2px 12px rgba(0, 0, 0, 0.35); } :root { --serif: 'Fraunces', Georgia, 'Times New Roman', serif; --sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --mono: 'JetBrains Mono', ui-monospace, monospace; --blur: 15px; --r-lg: 20px; --r-md: 13px; --r-sm: 10px; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: var(--bg); color: var(--text); font-family: var(--sans); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; -webkit-user-select: none; user-select: none; touch-action: none; } ::selection { background: var(--accent-soft); }