/* ============================================================ Number Recycler — Design Tokens Scoped under `body.recycler-page` so the neon palette doesn't leak into the rest of the site (other game pages keep their existing themes). When the equip UI lands, swap data-tile-skin / data-conveyor-skin / data-furnace-fx attributes on to override individual token groups. ============================================================ */ body.recycler-page { /* ---------- Background ---------- */ --bg-0: #05060d; --bg-1: #0a0b18; --bg-2: #101327; /* ---------- Ink (text) ---------- */ --ink: #eaf2ff; --ink-dim: #8fa0c4; --ink-faint: #566489; /* ---------- Lines / dividers ---------- */ --line: rgba(140, 170, 255, 0.10); --line-2: rgba(140, 170, 255, 0.22); /* ---------- Accent / brand ---------- */ --cyan: #3df0ff; --cyan-deep: #0091a8; --magenta: #ff3cc7; --magenta-deep: #a3008a; --violet: #8a5bff; --lime: #b6ff3c; --amber: #ffc73c; --red: #ff5b6e; /* ---------- Slime (recycler tank) ---------- */ --goo-base: #39c43a; --goo-bright: #7cff5a; --goo-mid: #3df0ff; --goo-deep: #8a5bff; /* ---------- Tile faces ---------- */ --tile-cyan-top: #9ef6ff; --tile-cyan-mid: #3df0ff; --tile-cyan-bottom: #16b8d8; --tile-cyan-ink: #04101a; --tile-cyan-glow: rgba(61, 240, 255, 0.35); --tile-magenta-top: #ffb1e6; --tile-magenta-mid: #ff3cc7; --tile-magenta-bottom: #c20094; --tile-magenta-ink: #1a0014; --tile-magenta-glow: rgba(255, 60, 199, 0.45); --tile-violet-top: #d6c2ff; --tile-violet-mid: #8a5bff; --tile-violet-bottom: #5128c8; --tile-violet-ink: #0d0028; --tile-violet-glow: rgba(138, 91, 255, 0.45); --tile-lime-top: #e4ffb1; --tile-lime-mid: #b6ff3c; --tile-lime-bottom: #7ccd00; --tile-lime-ink: #0d1a00; --tile-lime-glow: rgba(182, 255, 60, 0.45); --tile-amber-top: #ffe5a3; --tile-amber-mid: #ffc73c; --tile-amber-bottom: #c98700; --tile-amber-ink: #1a1000; --tile-amber-glow: rgba(255, 199, 60, 0.45); /* ---------- HUD chip value colors ---------- */ --chip-score-val: #ffffff; --chip-score-glow: rgba(61, 240, 255, 0.40); --chip-combo-val: #ffd166; --chip-combo-glow: rgba(255, 209, 102, 0.55); --chip-time-val: #a8ffec; --chip-time-glow: rgba(168, 255, 236, 0.45); --chip-found-val: #ff9bdd; --chip-found-glow: rgba(255, 155, 221, 0.50); /* ---------- Progress bar gradients ---------- */ --bar-score: linear-gradient(90deg, #3df0ff, #8a5bff, #ff3cc7); --bar-combo: linear-gradient(90deg, #ffc73c, #ff5b6e); --bar-found: linear-gradient(90deg, #ff3cc7, #8a5bff); --bar-time: linear-gradient(90deg, #3df0ff, #b6ff3c); /* ---------- Radii ---------- */ --rad-xs: 6px; --rad-sm: 10px; --rad-md: 12px; --rad-lg: 18px; --rad-xl: 24px; --rad-pill: 999px; /* ---------- Geometry ---------- */ --slot-num-w: 64px; --slot-op-w: 48px; --slot-h: 80px; --slot-gap: 10px; --slot-pad: 14px; --tile-belt: 78px; --tile-belt-gap: 18px; --piston-col-w: 64px; --piston-head-w: 50px; --piston-head-h: 34px; --piston-rod-w: 8px; --piston-rod-h: 42px; --piston-rod-h-lift: 62px; --piston-base-w: 60px; --piston-base-h: 14px; --tank-w: 120px; --tank-h: 60vh; --tank-min-h: 380px; --tank-max-h: 560px; /* ---------- Type ---------- */ --font-display: 'Orbitron', system-ui, sans-serif; --font-ui: 'Space Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; /* ---------- Glow recipes ---------- */ --glow-cyan: 0 0 22px rgba(61, 240, 255, 0.45); --glow-magenta: 0 0 18px rgba(255, 60, 199, 0.70), 0 0 38px rgba(255, 60, 199, 0.35); --glow-target: drop-shadow(0 0 32px rgba(61, 240, 255, 0.55)) drop-shadow(0 0 64px rgba(138, 91, 255, 0.35)); --glow-target-hi: drop-shadow(0 0 42px rgba(61, 240, 255, 0.75)) drop-shadow(0 0 80px rgba(138, 91, 255, 0.55)); --glow-tank-outer: 0 0 40px rgba(124, 255, 90, 0.15); --glow-tank-inner: inset 0 0 60px rgba(124, 255, 90, 0.18); /* ---------- Animation timings ---------- */ --t-tile-in: 0.35s; --e-tile-in: cubic-bezier(.18, .9, .3, 1.2); --t-target-pulse: 2.4s; --t-ring-spin: 8s; --t-orb-drift: 14s; --t-grid-slide: 18s; --t-belt-scroll: 1.6s; --t-belt-glide: 4s; --t-holo-float: 2s; }