/* Design tokens — the MooMoo Pixel Design System. One source of truth for colour, type, shape and motion. Every variable name below is unchanged from every previous palette on purpose: every screen and component already reads these names, so retinting them here reskins the whole app without touching a single line of JS. Theme system, v3 (2026-07-31): SEVEN presets — Light, Dark, Meadow, Sunset, Ocean, Blossom, Midnight — plus the user-defined "custom" one, switched by setting data-theme on (see theme.js) and picked from Settings → You → Look. Every COLOUR token lives inside a `:root[data-theme="…"]` block; everything theme-INVARIANT (spacing, radii, notch geometry, motion, type scale) stays in the bare `:root` at the bottom, shared by all eight. There is also a bare-`:root` copy of Light at the top of the generated section, purely as the pre-hydration fallback so nothing renders colourless before theme.js runs. v3 replaced v2's four hand-tuned themes (cozy-farm, lavender-sky, orchard, ocean-breeze). Those ids still appear in saved settings, so theme.js and lib/store.py both remap them to their nearest v3 equivalent — see LEGACY_THEMES. **The whole colour section below is GENERATED — do not hand-edit it.** `python tools/make_themes.py` derives all seven from six picked base colours each (background, card, text, border, primary accent, secondary accent) using the exact algorithm public/js/customTheme.js runs for the custom theme. That equivalence is the point: a preset can no longer define a token the custom theme is missing, or vice versa. To change a palette, edit the base colours in that script and re-run it with --write; it refuses to write if any contrast pair fails, and prints the measured ratio for every pair. The v2 hierarchy rule still holds and is what the base colours encode: --cream/--surface/--surface-2/--surface-sunk are NEUTRALS forming a real luminance ladder; the characterful hues are reserved for --accent, --accent-2 (a deliberately DIFFERENT hue), --line-strong, status colours and hover/focus feedback. Depth comes from that ladder plus the notch/ bevel/ring geometry, not from big blurred shadows. Values are precomputed, static hex (not live color-mix()) for the same reason as always: a plain hex renders identically in every browser that has ever existed. Every value comes from an actual sRGB relative-luminance / contrast calculation, not eyeballing. */ /* Pixel Code (qwerasd205, OFL-1.1, self-hosted) — a monospace pixel font built for legibility (designed for code editors), used app-wide. */ @font-face { font-family: "Pixel Code"; src: url("/fonts/pixel-code-400.ttf") format("truetype"); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: "Pixel Code"; src: url("/fonts/pixel-code-500.ttf") format("truetype"); font-weight: 500; font-style: normal; font-display: swap; } @font-face { font-family: "Pixel Code"; src: url("/fonts/pixel-code-600.ttf") format("truetype"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Pixel Code"; src: url("/fonts/pixel-code-700.ttf") format("truetype"); font-weight: 700; font-style: normal; font-display: swap; } /* >>> generated by tools/make_themes.py — do not edit by hand >>> */ /* ---- pre-hydration fallback: a bare :root copy of the default theme, so nothing renders colourless before theme.js sets data-theme. ---- */ :root { --mm-bg-deep: #060e1e; --mm-bg-dark: #09152c; --mm-bg-medium: #0d1c3c; --mm-lavender: #2b5fc9; --mm-lavender-light: #6087d6; --mm-lavender-pale: #8aa7e1; --mm-text-primary: #dfe7f7; --mm-text-secondary: #b5c7ec; --mm-text-dark: #1c1f23; --mm-border-dark: #030810; --mm-reward-gold: #d9a544; --cream: #eceef1; --surface: #ffffff; --surface-2: #f6f7f9; --surface-sunk: #cbced3; --line: #babec4; --line-strong: #7d848d; --ink: #1c1f23; --ink-soft: #4e5053; --ink-faint: #6c6e71; --on-accent: #ffffff; --accent: #2b5fc9; --accent-deep: #2b5fc9; --accent-wash: #dfe7f7; --accent-on-wash: #2b5fc9; --on-accent-1: #ffffff; --accent-2: #3f7f6d; --accent-2-deep: #3f7f6d; --accent-2-wash: #e2ece9; --accent-2-on-wash: #397262; --on-accent-2: #ffffff; --pink: #c1435c; --pink-deep: #c1435c; --pink-wash: #f6e5e8; --pink-on-wash: #ae3c53; --green: #5fa851; --green-deep: #528d48; --green-wash: #e9f3e7; --green-on-wash: #42713a; --blue: #5fa8c9; --blue-deep: #528da8; --blue-wash: #e9f3f7; --blue-on-wash: #427186; --yellow: #d9a544; --yellow-deep: #a07d3a; --yellow-wash: #faf2e5; --yellow-on-wash: #80642e; --lav: #2b5fc9; --lav-deep: #2b5fc9; --lav-wash: #cfd9eb; --r-common-text: #4f4c57; --r-uncommon-text: #445742; --r-rare-text: #445973; --r-epic-text: #784378; --r-legendary-text: #614c2d; --icon: #4e5053; --icon-active: #2b5fc9; --focus-ring: #2b5fc9; --bevel-light: rgba(255, 255, 255, .85); --bevel-dark: rgba(38, 36, 35, .18); --shadow-tint: #1c1f23; --shadow-alpha-sm: 14%; --shadow-alpha-md: 16%; --shadow-alpha-lg: 18%; } /* ---- Light — Neutral, high-readability daylight. The safe default. Generated from 6 base colours; see tools/make_themes.py. ---- */ :root[data-theme="light"] { --mm-bg-deep: #060e1e; --mm-bg-dark: #09152c; --mm-bg-medium: #0d1c3c; --mm-lavender: #2b5fc9; --mm-lavender-light: #6087d6; --mm-lavender-pale: #8aa7e1; --mm-text-primary: #dfe7f7; --mm-text-secondary: #b5c7ec; --mm-text-dark: #1c1f23; --mm-border-dark: #030810; --mm-reward-gold: #d9a544; --cream: #eceef1; --surface: #ffffff; --surface-2: #f6f7f9; --surface-sunk: #cbced3; --line: #babec4; --line-strong: #7d848d; --ink: #1c1f23; --ink-soft: #4e5053; --ink-faint: #6c6e71; --on-accent: #ffffff; --accent: #2b5fc9; --accent-deep: #2b5fc9; --accent-wash: #dfe7f7; --accent-on-wash: #2b5fc9; --on-accent-1: #ffffff; --accent-2: #3f7f6d; --accent-2-deep: #3f7f6d; --accent-2-wash: #e2ece9; --accent-2-on-wash: #397262; --on-accent-2: #ffffff; --pink: #c1435c; --pink-deep: #c1435c; --pink-wash: #f6e5e8; --pink-on-wash: #ae3c53; --green: #5fa851; --green-deep: #528d48; --green-wash: #e9f3e7; --green-on-wash: #42713a; --blue: #5fa8c9; --blue-deep: #528da8; --blue-wash: #e9f3f7; --blue-on-wash: #427186; --yellow: #d9a544; --yellow-deep: #a07d3a; --yellow-wash: #faf2e5; --yellow-on-wash: #80642e; --lav: #2b5fc9; --lav-deep: #2b5fc9; --lav-wash: #cfd9eb; --r-common-text: #4f4c57; --r-uncommon-text: #445742; --r-rare-text: #445973; --r-epic-text: #784378; --r-legendary-text: #614c2d; --icon: #4e5053; --icon-active: #2b5fc9; --focus-ring: #2b5fc9; --bevel-light: rgba(255, 255, 255, .85); --bevel-dark: rgba(38, 36, 35, .18); --shadow-tint: #1c1f23; --shadow-alpha-sm: 14%; --shadow-alpha-md: 16%; --shadow-alpha-lg: 18%; } /* ---- Dark — Neutral dark grey — deliberately not pure black. Generated from 6 base colours; see tools/make_themes.py. ---- */ :root[data-theme="dark"] { --mm-bg-deep: #0c1422; --mm-bg-dark: #111d31; --mm-bg-medium: #172843; --mm-lavender: #4d84e0; --mm-lavender-light: #7aa3e8; --mm-lavender-pale: #9dbbee; --mm-text-primary: #e4edfa; --mm-text-secondary: #c1d4f4; --mm-text-dark: #454647; --mm-border-dark: #060b12; --mm-reward-gold: #d9a544; --cream: #1c1e21; --surface: #2b2f34; --surface-2: #24272b; --surface-sunk: #121415; --line: #464b51; --line-strong: #79818b; --ink: #e7eaee; --ink-soft: #bec1c5; --ink-faint: #94989c; --on-accent: #ffffff; --accent: #4d84e0; --accent-deep: #5c8ee1; --accent-wash: #33435d; --accent-on-wash: #94b5ec; --on-accent-1: #000000; --accent-2: #3f9d8c; --accent-2-deep: #3f9d8c; --accent-2-wash: #304949; --accent-2-on-wash: #8cc4ba; --on-accent-2: #000000; --pink: #c1435c; --pink-deep: #c96479; --pink-wash: #4c333d; --pink-on-wash: #da8e9d; --green: #5fa851; --green-deep: #5fa851; --green-wash: #364a3a; --green-on-wash: #8fc285; --blue: #5fa8c9; --blue-deep: #5fa8c9; --blue-wash: #364a55; --blue-on-wash: #7fb9d4; --yellow: #d9a544; --yellow-deep: #d9a544; --yellow-wash: #514938; --yellow-on-wash: #ddae57; --lav: #4d84e0; --lav-deep: #5c8ee1; --lav-wash: #263247; --r-common-text: #9b90a5; --r-uncommon-text: #6b8f60; --r-rare-text: #6d8aaf; --r-epic-text: #a078a2; --r-legendary-text: #c98f3d; --icon: #bec1c5; --icon-active: #5c8ee1; --focus-ring: #6c99e4; --bevel-light: rgba(255, 255, 255, .4); --bevel-dark: rgba(0, 0, 0, .6); --shadow-tint: #000000; --shadow-alpha-sm: 40%; --shadow-alpha-md: 45%; --shadow-alpha-lg: 50%; } /* ---- Meadow — Fresh greens over a warm cream page. Generated from 6 base colours; see tools/make_themes.py. ---- */ :root[data-theme="meadow"] { --mm-bg-deep: #091208; --mm-bg-dark: #0d1a0c; --mm-bg-medium: #112310; --mm-lavender: #3a7536; --mm-lavender-light: #6b9868; --mm-lavender-pale: #93b390; --mm-text-primary: #e1eae1; --mm-text-secondary: #bacfb9; --mm-text-dark: #25301f; --mm-border-dark: #050904; --mm-reward-gold: #d9a544; --cream: #f4efdf; --surface: #fffdf6; --surface-2: #faf7ec; --surface-sunk: #cccfb5; --line: #b8bfa0; --line-strong: #6f8452; --ink: #25301f; --ink-soft: #505849; --ink-faint: #686f61; --on-accent: #ffffff; --accent: #3a7536; --accent-deep: #3a7536; --accent-wash: #e1e9d9; --accent-on-wash: #346931; --on-accent-1: #ffffff; --accent-2: #976628; --accent-2-deep: #976628; --accent-2-wash: #efe6d7; --accent-2-on-wash: #885c24; --on-accent-2: #ffffff; --pink: #c1435c; --pink-deep: #c1435c; --pink-wash: #f6e3e0; --pink-on-wash: #ae3c53; --green: #5fa851; --green-deep: #539047; --green-wash: #e9f1df; --green-on-wash: #427339; --blue: #5fa8c9; --blue-deep: #4e8496; --blue-wash: #e9f1f0; --blue-on-wash: #467787; --yellow: #d9a544; --yellow-deep: #a38239; --yellow-wash: #faf1dd; --yellow-on-wash: #82682e; --lav: #3a7536; --lav-deep: #3a7536; --lav-wash: #d8ddc6; --r-common-text: #545655; --r-uncommon-text: #415639; --r-rare-text: #425864; --r-epic-text: #6f426d; --r-legendary-text: #564c28; --icon: #505849; --icon-active: #3a7536; --focus-ring: #3a7536; --bevel-light: rgba(255, 255, 255, .85); --bevel-dark: rgba(38, 36, 35, .18); --shadow-tint: #25301f; --shadow-alpha-sm: 14%; --shadow-alpha-md: 16%; --shadow-alpha-lg: 18%; } /* ---- Sunset — Coral, peach and amber — warm all the way down. Generated from 6 base colours; see tools/make_themes.py. ---- */ :root[data-theme="sunset"] { --mm-bg-deep: #1d0b07; --mm-bg-dark: #2b100a; --mm-bg-medium: #3a160d; --mm-lavender: #c34a2c; --mm-lavender-light: #d27761; --mm-lavender-pale: #de9b8b; --mm-text-primary: #f6e4df; --mm-text-secondary: #eac0b5; --mm-text-dark: #43200f; --mm-border-dark: #100604; --mm-reward-gold: #d9a544; --cream: #fcefe4; --surface: #fffaf5; --surface-2: #fef5ed; --surface-sunk: #e6c9b7; --line: #dcb6a0; --line-strong: #b4714e; --ink: #43200f; --ink-soft: #6c5042; --ink-faint: #856d60; --on-accent: #ffffff; --accent: #c34a2c; --accent-deep: #c34a2c; --accent-wash: #f6e0d7; --accent-on-wash: #b04328; --on-accent-1: #ffffff; --accent-2: #976517; --accent-2-deep: #976517; --accent-2-wash: #efe4d4; --accent-2-on-wash: #885b15; --on-accent-2: #ffffff; --pink: #c1435c; --pink-deep: #c1435c; --pink-wash: #f6e0e0; --pink-on-wash: #ae3c53; --green: #5fa851; --green-deep: #598d44; --green-wash: #e9efde; --green-on-wash: #477136; --blue: #5fa8c9; --blue-deep: #598da4; --blue-wash: #e9efef; --blue-on-wash: #477183; --yellow: #d9a544; --yellow-deep: #ac7d34; --yellow-wash: #faeedc; --yellow-on-wash: #8a642a; --lav: #c34a2c; --lav-deep: #c34a2c; --lav-wash: #f3d6c8; --r-common-text: #664d4b; --r-uncommon-text: #575838; --r-rare-text: #51505c; --r-epic-text: #7c4376; --r-legendary-text: #794c21; --icon: #6c5042; --icon-active: #c34a2c; --focus-ring: #c34a2c; --bevel-light: rgba(255, 255, 255, .85); --bevel-dark: rgba(38, 36, 35, .18); --shadow-tint: #43200f; --shadow-alpha-sm: 14%; --shadow-alpha-md: 16%; --shadow-alpha-lg: 18%; } /* ---- Ocean — Teal and deep blue, cool and low-light. Generated from 6 base colours; see tools/make_themes.py. ---- */ :root[data-theme="ocean"] { --mm-bg-deep: #05151a; --mm-bg-dark: #071f26; --mm-bg-medium: #092b34; --mm-lavender: #1f8fae; --mm-lavender-light: #57abc2; --mm-lavender-pale: #84c1d2; --mm-text-primary: #ddeef3; --mm-text-secondary: #b1d8e3; --mm-text-dark: #3e4548; --mm-border-dark: #020b0e; --mm-reward-gold: #d9a544; --cream: #0b1e29; --surface: #153743; --surface-2: #102c37; --surface-sunk: #07141b; --line: #305361; --line-strong: #5e94a6; --ink: #cfe6ef; --ink-soft: #a6c0c9; --ink-faint: #7d99a3; --on-accent: #ffffff; --accent: #1f8fae; --accent-deep: #42a0bb; --accent-wash: #174c5d; --accent-on-wash: #8fc7d6; --on-accent-1: #000000; --accent-2: #3970a6; --accent-2-deep: #6693bc; --accent-2-wash: #1e455b; --accent-2-on-wash: #9cb8d2; --on-accent-2: #ffffff; --pink: #c1435c; --pink-deep: #c57488; --pink-wash: #3b3a48; --pink-on-wash: #da8e9d; --green: #5fa851; --green-deep: #5fa851; --green-wash: #255046; --green-on-wash: #8fc285; --blue: #5fa8c9; --blue-deep: #5fa8c9; --blue-wash: #255060; --blue-on-wash: #8fc2d9; --yellow: #d9a544; --yellow-deep: #d9a544; --yellow-wash: #404f43; --yellow-on-wash: #ddae57; --lav: #1f8fae; --lav-deep: #42a0bb; --lav-wash: #0f3544; --r-common-text: #9b90a5; --r-uncommon-text: #6b8f60; --r-rare-text: #5f7fa8; --r-epic-text: #9977a2; --r-legendary-text: #c98f3d; --icon: #a6c0c9; --icon-active: #42a0bb; --focus-ring: #55aac2; --bevel-light: rgba(255, 255, 255, .4); --bevel-dark: rgba(0, 0, 0, .6); --shadow-tint: #000000; --shadow-alpha-sm: 40%; --shadow-alpha-md: 45%; --shadow-alpha-lg: 50%; } /* ---- Blossom — Soft pink and lilac. Generated from 6 base colours; see tools/make_themes.py. ---- */ :root[data-theme="blossom"] { --mm-bg-deep: #1a0912; --mm-bg-dark: #270d1a; --mm-bg-medium: #351224; --mm-lavender: #b03d78; --mm-lavender-light: #c46e9a; --mm-lavender-pale: #d494b5; --mm-text-primary: #f3e2eb; --mm-text-secondary: #e3bbd0; --mm-text-dark: #37202f; --mm-border-dark: #0e050a; --mm-reward-gold: #d9a544; --cream: #f8edf3; --surface: #fffbfd; --surface-2: #fcf5f8; --surface-sunk: #e0cbd9; --line: #d4bacc; --line-strong: #a97b9c; --ink: #37202f; --ink-soft: #63505c; --ink-faint: #7d6d78; --on-accent: #ffffff; --accent: #b03d78; --accent-deep: #b03d78; --accent-wash: #f3dee9; --accent-on-wash: #9e376c; --on-accent-1: #ffffff; --accent-2: #7052bd; --accent-2-deep: #7052bd; --accent-2-wash: #eae2f3; --accent-2-on-wash: #7052bd; --on-accent-2: #ffffff; --pink: #c1435c; --pink-deep: #c1435c; --pink-wash: #f6e1e6; --pink-on-wash: #ae3c53; --green: #5fa851; --green-deep: #578d4a; --green-wash: #e9efe5; --green-on-wash: #46713b; --blue: #5fa8c9; --blue-deep: #578daa; --blue-wash: #e9eff6; --blue-on-wash: #467188; --yellow: #d9a544; --yellow-deep: #a87d3e; --yellow-wash: #faefe3; --yellow-on-wash: #866432; --lav: #b03d78; --lav-deep: #b03d78; --lav-wash: #edd3e1; --r-common-text: #5f4d5e; --r-uncommon-text: #515848; --r-rare-text: #4f5978; --r-epic-text: #7a4379; --r-legendary-text: #714c35; --icon: #63505c; --icon-active: #b03d78; --focus-ring: #b03d78; --bevel-light: rgba(255, 255, 255, .85); --bevel-dark: rgba(38, 36, 35, .18); --shadow-tint: #37202f; --shadow-alpha-sm: 14%; --shadow-alpha-md: 16%; --shadow-alpha-lg: 18%; } /* ---- Midnight — Deep indigo night with one bright accent. Generated from 6 base colours; see tools/make_themes.py. ---- */ :root[data-theme="midnight"] { --mm-bg-deep: #121526; --mm-bg-dark: #1b1f38; --mm-bg-medium: #252a4c; --mm-lavender: #7b8cff; --mm-lavender-light: #9ca9ff; --mm-lavender-pale: #b6c0ff; --mm-text-primary: #ebeeff; --mm-text-secondary: #d1d7ff; --mm-text-dark: #434449; --mm-border-dark: #0a0b14; --mm-reward-gold: #d9a544; --cream: #14172b; --surface: #242844; --surface-2: #1d2039; --surface-sunk: #0d0f1c; --line: #3e4466; --line-strong: #727aad; --ink: #dee2f4; --ink-soft: #b5b9cd; --ink-faint: #8c90a7; --on-accent: #ffffff; --accent: #7b8cff; --accent-deep: #7b8cff; --accent-wash: #394071; --accent-on-wash: #a3aeff; --on-accent-1: #000000; --accent-2: #3ecfc4; --accent-2-deep: #3ecfc4; --accent-2-wash: #2a5063; --accent-2-on-wash: #3ecfc4; --on-accent-2: #000000; --pink: #c1435c; --pink-deep: #c7637a; --pink-wash: #472e49; --pink-on-wash: #da8e9d; --green: #5fa851; --green-deep: #5fa851; --green-wash: #314447; --green-on-wash: #7fb974; --blue: #5fa8c9; --blue-deep: #5fa8c9; --blue-wash: #314461; --blue-on-wash: #7fb9d4; --yellow: #d9a544; --yellow-deep: #d9a544; --yellow-wash: #4c4444; --yellow-on-wash: #d9a544; --lav: #7b8cff; --lav-deep: #7b8cff; --lav-wash: #292e55; --r-common-text: #9b90a5; --r-uncommon-text: #6b8f60; --r-rare-text: #5f7fa8; --r-epic-text: #9e76a4; --r-legendary-text: #c98f3d; --icon: #b5b9cd; --icon-active: #7b8cff; --focus-ring: #7b8cff; --bevel-light: rgba(255, 255, 255, .4); --bevel-dark: rgba(0, 0, 0, .6); --shadow-tint: #000000; --shadow-alpha-sm: 40%; --shadow-alpha-md: 45%; --shadow-alpha-lg: 50%; } /* <<< generated by tools/make_themes.py <<< */ /* ---- background art (hand-authored, NOT part of the generated section above — tools/make_themes.py never touches this). Each built-in theme points at its own painted scene (public/assets/backgrounds/); .main in app.css paints it behind the main content area only. The custom theme has no built-in background of its own: theme.js sets --bg-image inline from whatever the user picks in Settings → You → Look (see customTheme.js's `background` field), or clears it back to 'none' if they haven't picked one. ---- */ :root { --bg-image: url(/assets/backgrounds/light.png); } :root[data-theme="light"] { --bg-image: url(/assets/backgrounds/light.png); } :root[data-theme="dark"] { --bg-image: url(/assets/backgrounds/dark.png); } :root[data-theme="meadow"] { --bg-image: url(/assets/backgrounds/meadow.png); } :root[data-theme="sunset"] { --bg-image: url(/assets/backgrounds/sunset.png); } :root[data-theme="ocean"] { --bg-image: url(/assets/backgrounds/ocean.png); } :root[data-theme="blossom"] { --bg-image: url(/assets/backgrounds/blossom.png); } :root[data-theme="midnight"] { --bg-image: url(/assets/backgrounds/midnight.png); } /* ====================================================================== Truly universal tokens — the handful of values that don't vary by either COLOUR THEME (this file) or UI STYLE (styles.css): the corner-radius scale (styles decide WHERE radius applies, not what the steps are), the spacing scale, animation DURATIONS (styles vary the easing curve, not how long things take — see styles.css), and fixed layout dimensions. ====================================================================== */ :root { /* ---- rarity ---- Collectible content colours, deliberately untouched by theme repaints: they're an established content-categorisation language (the same five tiers appear in lib/economy.py's drop odds and lib/catalog.py), not chrome. Until v3 every theme block repeated these five identical values; they live here now precisely because no theme is allowed to change them, which also keeps them defined for the custom theme for free. */ --r-common: #9b90a5; --r-uncommon: #6b8f60; --r-rare: #5f7fa8; --r-epic: #824781; --r-legendary: #c98f3d; /* ---- danger ---- The emergency/SOS button's colour, on the same "deliberately untouched by theme repaints" footing as rarity above. It used to borrow --pink-deep, which a custom theme's deriveTheme() can (correctly, for its normal job) nudge toward the user's own --ink for contrast — for a status LABEL that's fine, but for the SOS button's fill it could drift the "this is urgent" colour toward plain text colour. Fixed brand-safety tone instead: always reads as brown/red, in every built-in theme and every custom one. */ --danger: #a5433c; --danger-deep: #7a2f28; --on-danger: #ffffff; /* ---- shape scale (which components use how much of this is a UI-style decision) ---- */ --r-sm: 6px; --r-md: 10px; --r-lg: 14px; --r-xl: 18px; --r-pill: 999px; /* ---- spacing ---- */ --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px; /* ---- type ---- */ --font-pixel: "Pixel Code", "Press Start 2P", monospace; --fs-xs: .75rem; --fs-sm: .85rem; --fs-md: .95rem; --fs-lg: 1.15rem; --fs-xl: 1.5rem; --fs-xxl: 2rem; /* ---- motion durations (the EASE curve shape is a UI-style token) ---- */ --fast: .16s; --med: .28s; --slow: .5s; --nav-w: 232px; --bottom-nav-h: 68px; /* How much clearance any scrollable content needs at its bottom edge so its last item never ends up stuck under Moo's fixed cow-dock (cow button + SOS button, bottom-right, pointer-events:auto — see .cow-dock). */ --dock-clearance: 168px; } /* Motion is decoration here, never information. Everything below still reads perfectly with all of it switched off. */ @media (prefers-reduced-motion: reduce) { :root:not([data-motion="always"]) * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } :root[data-motion="never"] * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }