/* MotoXSports design tokens. Two skins ship. Switch by setting data-skin on : data-skin="mx90s" (default) - 90s motocross graphics data-skin="program" - Race Program editorial Skin files only override the values below; nothing else in the CSS references a raw color. */ :root { /* type */ --font-display: 'Anton', 'Arial Narrow', Impact, sans-serif; --font-body: 'Instrument Sans', system-ui, -apple-system, 'Helvetica Neue', sans-serif; --font-mono: 'Geist Mono', ui-monospace, Menlo, Consolas, monospace; --display-skew: -8deg; --display-tracking: 0.01em; /* type scale (fluid, 390px -> 1440px) */ --t-xxl: clamp(3.4rem, 11vw, 10.5rem); --t-xl: clamp(2.6rem, 6.4vw, 4.6rem); --t-l: clamp(1.9rem, 3.4vw, 3rem); --t-m: clamp(1.15rem, 1.5vw, 1.35rem); --t-s: 1rem; --t-xs: 0.8125rem; --t-data: clamp(3rem, 7vw, 6.5rem); /* space scale */ --s-1: 0.25rem; --s-2: 0.5rem; --s-3: 0.75rem; --s-4: 1rem; --s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem; --wrap: 1360px; --gutter: clamp(1.125rem, 4vw, 3.5rem); /* shape */ --border-w: 3px; --radius-plate: 30px 30px 10px 10px; --radius-panel: 0px; --shadow-hard: 6px 6px 0; --ease: cubic-bezier(0.7, 0, 0.2, 1); } /* ---------- skin: 90s motocross (default) ---------- */ :root, :root[data-skin='mx90s'] { --c-base: #0a0a0c; --c-surface: #16161a; --c-paper: #f4f1e8; --c-paper-raised: #ffffff; --c-ink: #f4f1e8; --c-ink-mid: #cfccc2; --c-ink-quiet: #9c9a90; --c-ink-on-paper: #0a0a0c; --c-ink-quiet-on-paper: #3a3830; --c-line: #2a2a30; --c-line-paper: #d6d2c4; --c-accent: #ff2e88; --c-accent-2: #00e5ff; --c-accent-3: #c8ff00; --c-fill-only: #7a2bff; --texture-dots: radial-gradient(#2a2a30 1.2px, transparent 1.4px); } /* ---------- skin: race program editorial ---------- */ :root[data-skin='program'] { --font-display: 'Big Shoulders Display', 'Oswald', 'Arial Narrow', sans-serif; --display-skew: 0deg; --display-tracking: -0.01em; --border-w: 2px; --radius-plate: 40px 40px 14px 14px; --radius-panel: 18px; --shadow-hard: 0 0 0; --c-base: #0e0e0c; --c-surface: #161614; --c-paper: #f2efe8; --c-paper-raised: #fbfaf6; --c-ink: #f2efe8; --c-ink-mid: #d2d0c6; --c-ink-quiet: #a8a69c; --c-ink-on-paper: #0e0e0c; --c-ink-quiet-on-paper: #55534b; --c-line: #2e2e29; --c-line-paper: #d8d4c8; --c-accent: #e6ff3d; --c-accent-2: #3de0ff; --c-accent-3: #e6ff3d; --c-fill-only: #8a6a4f; --texture-dots: none; }