/* ============================================ DESIGN TOKENS Colors, typography, radii, shadows, breakpoints. Single source of truth — change here, propagates everywhere. ============================================ */ :root { /* Surface colors */ --bg-deep: #05000d; --bg-dark: #0a0014; --bg-card: #110826; --bg-card-hover: #170d31; /* Brand palette */ --purple: #8b3dff; --purple-glow: #b366ff; --acid: #b6ff3c; --acid-glow: #d4ff7a; --gold: #f5c441; --blue: #2dd4ff; --blue-glow: #6ee7ff; /* Text */ --text-primary: #ece6ff; --text-secondary: #a89dc7; --text-muted: #6a5f87; /* Borders */ --border: rgba(139, 61, 255, 0.25); --border-strong: rgba(139, 61, 255, 0.55); /* Typography stacks — Google Fonts loaded in */ --font-display: 'Cinzel', serif; --font-body: 'Inter', system-ui, -apple-system, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* Effects */ --shadow-glow-purple: 0 0 30px rgba(139, 61, 255, 0.35); --shadow-glow-acid: 0 0 30px rgba(182, 255, 60, 0.3); --radius: 14px; /* Layout */ --max-width: 1200px; } /* Atmospheric background layers — fixed, behind everything */ body::before { content: ''; position: fixed; inset: 0; background: radial-gradient(ellipse at 15% 10%, rgba(139, 61, 255, 0.18), transparent 55%), radial-gradient(ellipse at 85% 80%, rgba(45, 212, 255, 0.12), transparent 55%), radial-gradient(ellipse at 50% 50%, rgba(182, 255, 60, 0.05), transparent 70%); pointer-events: none; z-index: 0; } body::after { content: ''; position: fixed; inset: 0; background-image: linear-gradient(rgba(139, 61, 255, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(139, 61, 255, 0.03) 1px, transparent 1px); background-size: 60px 60px; pointer-events: none; z-index: 0; mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, rgba(0, 0, 0, 0.6), transparent 75%); }