/* tokens.css — every colour and spacing value the UI uses. Chrome follows public/games/style.md's dark theme with a celeste accent, so this game sits alongside shooter/matching/snaky rather than looking imported from elsewhere. CARD colours are separate and fixed by the game specification — they are not part of the chrome theme and must not be re-tinted to match it. Switching to the colourblind-safe palette is a single class on (.vm-palette-colorblind); nothing in the engine or the render layer knows which palette is active. */ :root { /* chrome — from games/style.md */ --vm-accent: #38bdf8; --vm-accent-dark: #0ea5e9; --vm-bg: #0b1220; --vm-surface: #111827; --vm-surface-2: #1f2937; --vm-border: #374151; --vm-text: #e5e7eb; --vm-text-dim: #9ca3af; --vm-good: #4ade80; --vm-warn: #f59e0b; --vm-danger: #ef4444; /* face-down card */ --vm-back-fill: #16213a; --vm-back-stroke: #38bdf8; /* default card palette — FIXED BY SPEC, do not restyle */ --vm-red: #c22426; --vm-red-light: #d55d61; --vm-blue: #0029ab; --vm-blue-light: #0072e4; --vm-green: #008e46; --vm-green-light: #66e492; --vm-yellow: #ffcc00; --vm-yellow-light: #ffe066; /* layout */ --vm-radius: 14px; --vm-gap: clamp(8px, 1.6vw, 16px); --vm-pad: clamp(10px, 2vw, 20px); } /* Okabe-Ito colourblind-safe palette, opt-in via settings. */ .vm-palette-colorblind { --vm-red: #E69F00; --vm-red-light: #f0b84d; --vm-blue: #56B4E9; --vm-blue-light: #8ccdf0; --vm-green: #009E73; --vm-green-light: #4dc3a3; --vm-yellow: #F0E442; --vm-yellow-light: #f5ee85; } /* Honour a viewer who has asked for less motion. Phase 4 adds the animation catalogue; the rule lands here now so no later addition can forget it. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }