/* Design tokens. Single source of truth for colour, type, space, motion. Canvas black and the text tokens are fixed identity. Anchor and accents are this project's chosen set: cyan primary, violet secondary, green tertiary, pink quaternary, plus orange retained as the curator-ratings region colour. */ :root { /* Ground */ --canvas: #0B0B0D; --anchor: #151033; /* Glass */ --panel-fill: rgba(255, 255, 255, 0.055); --panel-fill-raised: rgba(255, 255, 255, 0.085); --panel-fill-sunken: rgba(0, 0, 0, 0.32); --panel-border: rgba(255, 255, 255, 0.14); --panel-border-bright: rgba(255, 255, 255, 0.26); --panel-blur: 14px; --panel-lift: 0 8px 24px rgba(0, 0, 0, 0.55); --panel-lift-high: 0 18px 48px rgba(0, 0, 0, 0.7); /* Accents */ --accent-primary: #35D6F0; /* results, active state, focus, primary action */ --accent-secondary: #B47CFF; /* filters region, links, informational chrome */ --accent-tertiary: #5DE88C; /* statistics region, success, positive */ --accent-quaternary: #FF5FA8; /* discovery region, playful detail */ --accent-curator: #F26822; /* ratings region only */ --accent-primary-dim: rgba(53, 214, 240, 0.16); --accent-secondary-dim: rgba(180, 124, 255, 0.16); --accent-tertiary-dim: rgba(93, 232, 140, 0.16); --accent-quaternary-dim: rgba(255, 95, 168, 0.16); --accent-curator-dim: rgba(242, 104, 34, 0.16); /* Text */ --text-primary: #ECECEF; --text-secondary: #C4C4CC; --text-on-accent: #08080A; /* Type */ --font-ui: Tahoma, Verdana, system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'Cascadia Mono', Consolas, monospace; /* Form */ --radius-sm: 8px; --radius-md: 12px; --radius-lg: 20px; --radius-pill: 999px; --border: 1px; /* Space */ --space-unit: 8px; --space-1: 8px; --space-2: 16px; --space-3: 24px; --space-4: 32px; --space-6: 48px; --space-8: 64px; /* Motion */ --motion-hover: 180ms; --motion-base: 280ms; --motion-celebrate: 640ms; --ease-standard: cubic-bezier(0.22, 0.61, 0.36, 1); --ease-entrance: cubic-bezier(0.34, 1.56, 0.64, 1); } @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; } } /* Page backdrop: one gradient per surface, canvas -> anchor, plus a wide cyan bloom. Fixed so it does not scroll with content. Attach via

as the first child of on every page. */ .page-glow { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(900px 620px at 78% -8%, rgba(53, 214, 240, 0.14), transparent 62%), radial-gradient(760px 520px at 8% 4%, rgba(180, 124, 255, 0.10), transparent 60%), linear-gradient(178deg, var(--canvas) 0%, var(--canvas) 38%, var(--anchor) 100%); }