/* Arena console design tokens. Dark only — there is no light theme. is pinned in index.html and the theme toggle is gone, so no [data-theme="light"] rule can ever match. Breakpoints used across the CSS: 520px (phone), 800px (one column ⇄ rail), 905px (rail gains labels), 1280px (wide context column — and above it the column and the container grow by proportion rather than in steps; see the fifth window class, `huge`, in the WINDOW CLASSES block of shell.css). */ :root { /* Core palette — DNA of the classic arena */ --bg: #08060f; --bg2: #0a0714; --gold: #f1c152; --gold2: #e0a23a; --gold-deep: #d99a26; --gold-ink: #1a1204; --danger: #ff5d6c; --danger-soft: #ff8a94; --ok: #35c783; --cool: #7cc9ff; /* Neon additions */ --violet: #a78bfa; --violet-300: #c4b5fd; --violet-600: #7c3aed; --pink: #f472b6; --cyan: #67e8f9; /* TONE triplets — raw channel lists so components can interpolate an alpha without minting a new colour token per opacity step: border-color: rgba(var(--t-gold), .3); Every row/chip/pill modifier in components.css is one of these five. */ --t-gold: 241, 193, 82; --t-ok: 53, 199, 131; --t-danger: 255, 93, 108; --t-violet: 167, 139, 250; --t-mute: 236, 231, 250; /* Text — four steps, not three. --text-soft is the one the console reaches for constantly: secondary prose that is quieter than dim but still meant to be read, which faint is not. */ --text: #ece7fa; --text-dim: rgba(236, 231, 250, 0.7); --text-soft: rgba(236, 231, 250, 0.5); --text-faint: rgba(236, 231, 250, 0.34); /* Surfaces */ --panel: rgba(18, 12, 34, 0.56); --panel-strong: rgba(12, 8, 24, 0.56); --panel-soft: rgba(20, 13, 38, 0.5); --row: rgba(24, 16, 44, 0.46); --row-hover: rgba(34, 22, 60, 0.7); --stroke: rgba(167, 139, 250, 0.18); --stroke-strong: rgba(167, 139, 250, 0.3); --hairline: rgba(167, 139, 250, 0.14); /* Glass */ --glass-bg: rgba(12, 8, 24, 0.58); --glass-brd: rgba(167, 139, 250, 0.16); --glass-blur: 18px; /* Gradients */ --gold-grad: linear-gradient(135deg, var(--gold), var(--gold-deep)); --neon-grad: linear-gradient(120deg, var(--violet), var(--pink) 46%, var(--gold)); --cyan-grad: linear-gradient(120deg, var(--cyan), var(--cool)); /* Draw-offer rainbow (ported from the classic arena DNA) */ --draw-rainbow: linear-gradient(90deg, var(--danger), var(--gold), var(--ok), var(--cool), var(--violet), var(--pink), var(--danger)); /* Radii — the console never uses 24 or 32px for content. */ --r-xs: 7px; --r-sm: 9px; --r-md: 11px; --r-lg: 15px; --r-xl: 18px; --r-panel: 16px; --r-shell: 22px; --r-pill: 999px; /* Shadows & glows */ --shadow-card: 0 18px 50px rgba(0, 0, 0, 0.45); --shadow-pop: 0 10px 30px rgba(0, 0, 0, 0.38); --shadow-glow-gold: 0 0 26px rgba(241, 193, 82, 0.35); --shadow-glow-violet: 0 0 26px rgba(167, 139, 250, 0.32); --shadow-glow-danger: 0 0 22px rgba(255, 93, 108, 0.3); --shadow-glow-ok: 0 0 22px rgba(53, 199, 131, 0.3); /* Type — Manrope (Cyrillic body) + Unbounded (Cyrillic display). Sora/Space Grotesk remain as latin fallbacks for EN mode + digits. JetBrains Mono carries every QUANTITY: clocks, ratings, scores, ply counters, deltas, pips, coordinates, timers. Latin subsets only — it has no Cyrillic here on purpose, so a stray word falls back to Manrope. */ --font-display: "Unbounded", "Sora", "Space Grotesk", system-ui, -apple-system, sans-serif; --font-body: "Manrope", "Space Grotesk", "Sora", system-ui, -apple-system, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; /* Type scale — headings stop being ad-hoc. Size / weight / tracking, named for the role rather than the tag, because the same role appears on several tags across eight screens. */ --fs-hero: 34px; --fw-hero: 800; --ls-hero: -0.01em; --fs-h2: 22px; --fw-h2: 800; --fs-h3: 20px; --fw-h3: 800; --fs-panel-head: 11px; --fw-panel-head: 700; --ls-panel-head: 0.1em; --fs-section: 10px; --fw-section: 700; --ls-section: 0.1em; --fs-kicker: 10px; --fw-kicker: 800; --ls-kicker: 0.12em; --fs-rail: 8px; --fw-rail: 800; --ls-rail: 0.06em; /* Z scale */ --z-bg: 0; --z-content: 1; --z-topbar: 50; --z-overlay: 80; --z-toast: 100; --z-modal: 200; /* Motion */ --spring: cubic-bezier(0.2, 0.9, 0.3, 1.25); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 140ms; --dur-med: 260ms; --dur-slow: 480ms; /* Layout */ --container: 1060px; --topbar-h: 58px; /* Shell sizing. The rail and the context column are chrome around the scene, so their widths key off the WINDOW; everything inside the scene keys off the scene's own inline size (@container scene) instead — see the window-class block at the foot of shell.css. */ --rail-w: 62px; --ctx-w: 252px; --hud-h: 58px; --act-h: 54px; color-scheme: dark; } /* Expanded: the rail is wide enough to carry labels. */ @media (min-width: 905px) { :root { --rail-w: 78px; --ctx-w: 300px; } } /* Large: the context column gets its full width — and above the 1280×800 window the mock was drawn at, the frame grows BY PROPORTION rather than in a fifth fixed step. A stepped --ctx-w would jump the scene's width at one window size on every drag, and the font histogram is byte-identical from 1280 up (docs/design/console/handoff-what-is-left.md §5.3), so there is no type scale to add and nothing a font size would fix. Both clamp()s anchor at the drawn values: at 1280, 25vw is 320px and 70vw is 896px, so the floors win and the mock size renders exactly as measured all along. Above it the column tracks a quarter of the window — its own proportion at 1280, 26.9% — to a 480px cap, and the scene content's cap tracks 70% to 1400px. Measured over CDP, authed, on the container-bound screens (analytics, battle pass, shop): the dead gutter beside the container was 246px at 1728×1080 and 1078px at 2560×1440; after, it is ~8px at 1728 (scene 1218, container 1210) and 602px at 2560, where 1400 is the design's stop and the remaining canvas belongs to the screens' own `huge` layouts (shell.css names the class). Full-bleed hosts already set `max-width: none` on #view and are untouched by --container. */ @media (min-width: 1280px) { :root { --ctx-w: clamp(344px, 25vw, 480px); --container: clamp(1060px, 70vw, 1400px); } }