/* Nilip i Fiko — design tokens * Single source of truth for colors, typography, spacing, radius, shadows, motion. * Link before any page-specific styles: */ :root { /* ─── Colors: surfaces ─────────────────────────────────────────── */ --bg: #0f1117; --bg-elev: #0b0f1a; --bg-panel: rgba(15,17,23,0.5); --bg-panel-strong: rgba(15,17,23,0.85); --bg-panel-solid: rgba(15,17,23,0.95); --bg-header: rgba(11,15,26,0.92); --bg-code: #1a1d27; /* ─── Colors: borders ──────────────────────────────────────────── */ --border: #1f2937; --border-strong: #2a2d3a; --border-subtle: #141a28; /* ─── Colors: text ─────────────────────────────────────────────── */ --text: #e2e4ed; --text-strong: #cbd1e0; --text-muted: #9ca3af; /* 6.1:1 on --bg ✓ AA */ --text-subtle: #8a90a0; /* 5.6:1 on --bg ✓ AA — was #6b7080 (3.4:1, failed) */ --text-faint: #4b5161; /* 2.0:1 — DECORATIVE only (copyright bar, never body text) */ /* ─── Colors: brand & semantic ─────────────────────────────────── */ --accent: #38bdf8; /* cyan — primary brand */ --warn: #fbbf24; /* amber — warning / 1st place */ --bad: #f87171; /* red — danger / error */ --ok: #34d399; /* emerald — success */ --bronze: #d97706; /* 3rd place */ --info: #60a5fa; /* blue — leave-link, countdown */ --info-strong: #4f8ef7; /* blue — countdown number */ --orange: #fb923c; /* secondary action — build button */ --purple: #a855f7; /* AI / generative features (soundlab) */ --cyan-grad-end: #0ea5e9; /* gradient endpoint for histogram bars */ --accent-hover: #60c7ff; /* accent on hover (chat-send) */ --slate-fg: #94a3b8; /* secondary button text */ --slate-fg-hover: #e2e8f0; /* secondary button hover text */ --slate-border: #475569; /* secondary button border */ --border-secondary: #3a3f4d; /* lobby secondary outline */ /* ─── Colors: accent alpha tints (replaces 40+ rgba duplicates) ── */ --accent-bg-subtle: rgba(56,189,248,0.04); --accent-bg-soft: rgba(56,189,248,0.08); --accent-bg: rgba(56,189,248,0.12); --accent-bg-strong: rgba(56,189,248,0.2); --accent-border-soft: rgba(56,189,248,0.4); --accent-border: rgba(56,189,248,0.5); --accent-shadow-soft: rgba(56,189,248,0.05); --warn-bg-soft: rgba(251,191,36,0.06); --warn-shadow: rgba(251,191,36,0.4); --warn-shadow-strong: rgba(251,191,36,0.5); --bad-bg-soft: rgba(248,113,113,0.04); --bad-shadow: rgba(248,113,113,0.6); --bad-shadow-soft: rgba(248,113,113,0.3); --ok-bg-soft: rgba(52,211,153,0.08); --neutral-shadow: rgba(107,112,128,0.2); /* ─── Typography ───────────────────────────────────────────────── */ --ff-brand: 'Orbitron','Segoe UI',sans-serif; --ff-body: -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',sans-serif; --ff-mono: ui-monospace,'SF Mono',Menlo,monospace; --fs-xs: 10px; --fs-sm: 11px; --fs-base: 12px; --fs-md: 13px; --fs-lg: 14px; --fs-xl: 16px; --fs-h3: 18px; --fs-h2: 24px; --fs-h1: 32px; --fs-display: clamp(90px,20vw,180px); --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-black: 900; --lh-tight: 1; --lh-snug: 1.4; --lh-normal: 1.5; --lh-loose: 1.6; --lh-relaxed: 1.7; --ls-tight: 0.04em; --ls-normal: 0.06em; --ls-wide: 0.08em; --ls-wider: 0.1em; --ls-widest: 0.14em; /* ─── Spacing (kept compatible with existing usage) ────────────── */ --sp-1: 4px; --sp-2: 6px; --sp-3: 8px; --sp-4: 10px; --sp-5: 12px; --sp-6: 16px; --sp-7: 20px; --sp-8: 24px; --sp-9: 28px; --sp-10: 32px; --sp-11: 40px; /* ─── Radius ───────────────────────────────────────────────────── */ --radius-sm: 2px; --radius: 3px; --radius-md: 4px; --radius-lg: 6px; --radius-xl: 8px; --radius-full: 50%; /* ─── Shadows / glows (replaces 20+ ad-hoc box-shadow values) ──── */ --glow-accent-xs: 0 0 6px var(--accent-shadow-soft); --glow-accent-sm: 0 0 8px var(--accent-border); --glow-accent: 0 0 10px rgba(56,189,248,0.25); --glow-accent-md: 0 0 12px rgba(56,189,248,0.35); --glow-accent-lg: 0 0 18px var(--accent-border); --glow-accent-xl: 0 0 20px var(--accent-shadow-soft),0 0 40px rgba(56,189,248,0.3); --glow-warn-sm: 0 0 6px var(--warn-shadow); --glow-bad-lg: 0 0 20px var(--bad-shadow),0 0 40px var(--bad-shadow-soft); --glow-neutral: 0 0 6px var(--neutral-shadow); --inset-input: inset 0 0 6px var(--accent-shadow-soft); /* ─── Motion ───────────────────────────────────────────────────── */ --t-fast: 120ms; --t-base: 140ms; } /* Universal reset (was duplicated in every file) */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } /* Visible focus indicator for keyboard navigators (WCAG 2.4.7). Scoped to interactive elements only — the previous `*:focus-visible` wildcard caused FPS regression because it forced the renderer to evaluate focus state on every element including canvas. */ button, a, input, select, textarea, [role="button"], [role="tab"], [tabindex] { outline: none; } button:focus-visible, a:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [role="button"]:focus-visible, [role="tab"]:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; box-shadow: 0 0 0 4px rgba(56,189,248,0.25); border-radius: var(--radius); } /* Skip link — visible only when focused (WCAG 2.4.1) */ .skip-link { position: absolute; top: -100px; left: var(--sp-5); background: var(--bg-panel-solid); color: var(--accent); padding: var(--sp-3) var(--sp-6); border: 1px solid var(--accent); border-radius: var(--radius); font-family: var(--ff-brand); font-size: var(--fs-md); text-decoration: none; letter-spacing: var(--ls-wide); text-transform: uppercase; z-index: 9999; transition: top 120ms; } .skip-link:focus { top: var(--sp-3); } /* Honor prefers-reduced-motion (WCAG 2.3.3). Animations like pulse (404), glitch (500), replay-blink, marquee, particle effects all collapse to near-instant. Game canvas animations not affected (handled in JS). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* Visually-hidden utility — keeps content for screen readers */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* Body baseline (every page sets these — extracted) */ body { background: var(--bg); font-family: var(--ff-brand); color: var(--text); }