/* PLOT ENGINEERS — design tokens Direction: retro-futurist broadcast. A CRT tube as a cosmic transmission terminal. TikTok neon (cyan + magenta-red) over deep space. One dominant dark field, two committed accents, white for reading. */ :root { /* ---- Core field: warm command-center void ------------------------ */ --space-void: #0a0604; --space-deep: #150c05; --space-panel: #1f1308; --space-line: #3a2510; --space-line-bright: #5f451f; /* ---- Command accents (legacy names from the broadcast era; cyan=amber, red=ember, violet=brass) ------------------------ */ --neon-cyan: #ffb020; --neon-cyan-soft: #ffd8a0; --neon-red: #ff5030; --neon-red-soft: #ff9c6c; --neon-violet: #c87830; /* ---- Ink --------------------------------------------------------- */ --ink: #f4e6c6; --ink-dim: #cbb488; --ink-faint: #ab8b5c; /* ≥5:1 on the darkest surfaces (WCAG AA at small sizes) */ /* ---- Phosphor (the screen itself) -------------------------------- */ --phosphor: #ffd08a; /* warm amber CRT glow */ --screen-bg: #0b0703; /* ---- Semantic ---------------------------------------------------- */ --on-air: #ff4030; --signal: var(--neon-cyan); /* ---- Glow helpers ------------------------------------------------ */ --glow-cyan: 0 0 12px rgba(255, 176, 32, 0.55), 0 0 34px rgba(255, 176, 32, 0.28); --glow-red: 0 0 12px rgba(255, 80, 48, 0.5), 0 0 34px rgba(255, 80, 48, 0.26); --glow-soft: 0 0 24px rgba(200, 120, 48, 0.25); /* ---- Type -------------------------------------------------------- */ --font-display: "Chakra Petch", "Segoe UI", system-ui, sans-serif; --font-mono: "Space Mono", ui-monospace, "Courier New", monospace; --text-xs: 0.72rem; --text-sm: 0.84rem; --text-base: clamp(0.95rem, 0.9rem + 0.25vw, 1.05rem); --text-lg: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); --text-xl: clamp(1.8rem, 1.3rem + 2vw, 3rem); --text-hero: clamp(2.4rem, 1.4rem + 4vw, 5.2rem); --tracking-wide: 0.14em; --tracking-mega: 0.34em; /* ---- Spacing rhythm (nonuniform on purpose) ---------------------- */ --s-1: 0.35rem; --s-2: 0.6rem; --s-3: 0.9rem; --s-4: 1.35rem; --s-5: 2rem; --s-6: 3rem; --s-7: 4.5rem; /* ---- Surfaces / radius ------------------------------------------ */ --radius-sm: 6px; --radius: 12px; --radius-lg: 20px; --cabinet-radius: 26px; /* ---- Motion ------------------------------------------------------ */ --dur-fast: 140ms; --dur: 300ms; --dur-slow: 620ms; --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1); --ease-snap: cubic-bezier(0.5, 1.6, 0.4, 1); --rail-w: clamp(248px, 22vw, 320px); } /* Users who ask for less motion, or who flip the console's Reduce-Effects knob (adds .fx-off to ), get a calm, static interface. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 0ms; --dur: 0ms; --dur-slow: 0ms; } } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; height: 100%; } body { background: var(--space-void); color: var(--ink); font-family: var(--font-display); font-size: var(--text-base); line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow: hidden; /* the console owns the viewport */ } :focus-visible { outline: 2px solid var(--neon-cyan); outline-offset: 2px; border-radius: 3px; } .skip-link { position: fixed; top: -60px; left: var(--s-3); z-index: 100; padding: var(--s-2) var(--s-3); background: var(--neon-cyan); color: #001513; font-weight: 700; letter-spacing: var(--tracking-wide); text-transform: uppercase; border-radius: var(--radius-sm); transition: top var(--dur) var(--ease-out-expo); } .skip-link:focus { top: var(--s-3); } .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; }