/* Lights Out Events — design tokens. Single source of truth for every color, type size, spacing step, radius, shadow, breakpoint, and z-index used on the site. Nothing in any other CSS file should hardcode a value that has a token here — see DESIGN_SYSTEM.md and CLAUDE_UI_RULES.md. Two themes, one token set: - Glass (default) — public-facing pages: home, leaderboard, records, login, register, my races. Translucent panels, blur, red glow. - Flat "mission control" — operator/staff tooling (live control, operator login/profile). Solid panels, no blur, no glass. A page's theme is chosen by adding `theme-operator` to in that page's template (see base.html's `body_class` block) — never by user role. Every component reads the same semantic tokens (--f1-panel, --f1-border, --f1-overlay); the theme-operator class just repoints what those tokens resolve to. Component CSS should never care which theme is active — that's the whole point of the indirection. */ :root { /* ── Brand & semantic colors ─────────────────────────────────────── */ --f1-red: #e10600; --f1-red-dark: #a10400; --f1-red-glow: rgba(225, 6, 0, 0.55); --f1-green: #00e676; --f1-yellow: #ffd400; --f1-danger: #ff5252; --f1-blue: #4fc3ff; --f1-purple: #b026ff; /* ── Base surfaces (raw values) ──────────────────────────────────── */ --f1-black: #0a0a0d; --f1-black-2: #111116; --f1-panel-glass: rgba(22, 22, 28, 0.72); --f1-panel-solid: #101010; --f1-surface-glass: rgba(255, 255, 255, 0.06); --f1-surface-glass-strong: rgba(255, 255, 255, 0.1); --f1-surface-solid: #151515; --f1-surface-solid-hover: #1a1a1a; --f1-border-glass: rgba(255, 255, 255, 0.08); --f1-border-solid: #262626; --f1-border-solid-bright: #383838; /* ── Semantic surface tokens — every component consumes these, never the raw values above. Default = glass theme. .theme-operator repoints them to the flat/solid values below. ── */ --f1-bg: var(--f1-black); --f1-panel: var(--f1-panel-glass); --f1-surface: var(--f1-surface-glass); --f1-surface-strong: var(--f1-surface-glass-strong); --f1-border: var(--f1-border-glass); --f1-blur: 18px; /* ── Text ─────────────────────────────────────────────────────────── */ --f1-text: #f2f2f5; /* 17.7:1 on --f1-bg */ --f1-text-dim: #9a9aa4; /* 7.1:1 — the floor for anything a user reads */ /* --f1-text-faint is 2.67:1 on --f1-bg and FAILS WCAG AA (4.5:1 normal, 3:1 large). That is deliberate, not an oversight: on a #0a0a0d background there is only room for about two informational greys above 4.5:1, and lightening this one far enough to pass would put it within ~16 values per channel of --f1-text-dim, i.e. visually the same grey, losing the hierarchy it exists to provide. The rule instead: NEVER use --f1-text-faint for text a user has to read. Informational text — labels, status, empty states, timestamps, form help — uses --f1-text-dim. --f1-text-faint is only for decorative fills and genuinely disabled/inactive states, where the low contrast is the point. */ --f1-text-faint: #55555c; /* ── Typography ───────────────────────────────────────────────────── */ --f1-font: "Titillium Web", "Segoe UI", sans-serif; --f1-mono: "Share Tech Mono", "Consolas", monospace; --f1-text-xs: 0.625rem; /* 10px — badges, micro labels */ --f1-text-sm: 0.75rem; /* 12px — captions, timestamps */ --f1-text-md: 0.875rem; /* 14px — body text, form inputs */ --f1-text-base: 1rem; /* 16px — default body */ --f1-text-lg: 1.25rem; /* 20px — subheadings, card titles */ --f1-text-xl: 1.5rem; /* 24px — section headings */ --f1-text-2xl: 2rem; /* 32px — page titles */ --f1-text-3xl: 3rem; /* 48px — hero display text */ --f1-weight-regular: 400; --f1-weight-semibold: 600; --f1-weight-bold: 700; --f1-weight-black: 900; /* ── Spacing (4px base) ───────────────────────────────────────────── */ --f1-space-1: 0.25rem; /* 4px */ --f1-space-2: 0.5rem; /* 8px */ --f1-space-3: 0.75rem; /* 12px */ --f1-space-4: 1rem; /* 16px */ --f1-space-5: 1.25rem; /* 20px */ --f1-space-6: 1.5rem; /* 24px */ --f1-space-8: 2rem; /* 32px */ --f1-space-10: 2.5rem; /* 40px */ --f1-space-12: 3rem; /* 48px */ --f1-space-16: 4rem; /* 64px */ /* ── Border radius ────────────────────────────────────────────────── */ --f1-radius-xs: 4px; /* badges, small tags */ --f1-radius-sm: 6px; /* buttons, inputs, selects */ --f1-radius-md: 10px; /* cards, panels (flat theme) */ --f1-radius-lg: 14px; /* glass panels, modals */ --f1-radius-full: 999px; /* pills, avatars */ /* Semantic panel radius — glass panels get --radius-lg, flat/operator panels get the tighter --radius-md. .card-f1 reads this one token rather than hardcoding either value directly. */ --f1-radius-panel: var(--f1-radius-lg); /* ── Shadows ──────────────────────────────────────────────────────── */ --f1-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.3); --f1-shadow-md: 0 4px 16px rgba(0, 0, 0, 0.4); --f1-shadow-lg: 0 8px 32px rgba(0, 0, 0, 0.5); --f1-shadow-glow: 0 0 20px var(--f1-red-glow); /* ── Breakpoints — documented here for reference; media queries can't consume custom properties, so these are also written as literal px values in CSS. Mobile-first (min-width). Keep any new @media rule on one of these four numbers. ── --f1-bp-sm: 480px; mobile landscape / large phone --f1-bp-md: 768px; tablet --f1-bp-lg: 1100px; desktop --f1-bp-xl: 1400px; wide desktop */ /* ── z-index ──────────────────────────────────────────────────────── */ --f1-z-bg: -1; --f1-z-base: 0; --f1-z-raised: 10; --f1-z-dropdown: 100; --f1-z-sticky: 200; --f1-z-modal: 300; --f1-z-toast: 400; --f1-z-tooltip: 500; } /* ── Flat "mission control" theme override ─────────────────────────── Add class="theme-operator" to on operator/staff pages. Every component still reads var(--f1-panel) / var(--f1-surface) / var(--f1-border) — this block just repoints what those resolve to for the whole subtree. */ .theme-operator { --f1-panel: var(--f1-panel-solid); --f1-surface: var(--f1-surface-solid); --f1-surface-strong: var(--f1-surface-solid-hover); --f1-border: var(--f1-border-solid); --f1-radius-panel: var(--f1-radius-md); --f1-blur: 0px; }