/* Reality Draft — design tokens Per-game accent: set data-game on (or any ancestor) and override --rd-accent-*. Nothing else in the system references a literal accent colour. */ :root { /* ground */ --rd-ground-top: #fbf6f1; --rd-ground-mid: #f5e9e7; --rd-ground-bot: #efdde3; --rd-ground-glow-a: rgba(216, 30, 91, .16); --rd-ground-glow-b: rgba(74, 26, 84, .16); /* surfaces */ --rd-surface: #fffdf9; --rd-surface-glass: rgba(255, 253, 249, .72); --rd-surface-tint: #f7eff2; --rd-hairline: rgba(40, 20, 35, .1); --rd-hairline-soft: rgba(40, 20, 35, .09); /* ink */ --rd-ink: #23161f; --rd-ink-soft: #5e4a55; --rd-ink-muted: #6d5c66; --rd-on-accent: #fffdf9; /* accents — overridden per game */ --rd-accent: #d81e5b; --rd-accent-deep: #a51a52; --rd-accent-dark: #5e1440; --rd-accent-tint: #fdeaf1; --rd-accent-ink: #8a3a5e; --rd-positive: #1f6d52; /* type */ --rd-font-display: "Instrument Serif", Georgia, serif; --rd-font-ui: "Outfit", system-ui, -apple-system, sans-serif; /* shape */ --rd-radius-sm: 8px; --rd-radius-md: 18px; --rd-radius-lg: 20px; --rd-radius-pill: 28px; /* elevation — plum-tinted, thrown low and long */ --rd-shadow-card: 0 18px 44px -22px rgba(58, 20, 44, .22); --rd-shadow-card-lg: 0 22px 52px -24px rgba(58, 20, 44, .24); --rd-shadow-accent: 0 20px 46px -20px rgba(94, 20, 64, .55); --rd-shadow-bar: 0 20px 48px -16px rgba(58, 20, 44, .42); /* rhythm */ --rd-gap-xs: 6px; --rd-gap-sm: 12px; --rd-gap-md: 20px; --rd-gap-lg: 32px; --rd-safe-bottom: env(safe-area-inset-bottom, 0px); --rd-safe-top: env(safe-area-inset-top, 0px); } /* Fantasy Troupe — Dancing with the Stars (default) */ [data-game="fantasy-troupe"] { --rd-accent: #d81e5b; --rd-accent-deep: #a51a52; --rd-accent-dark: #5e1440; --rd-accent-tint: #fdeaf1; --rd-accent-ink: #8a3a5e; } /* Villa League — Love Island (example of a second game) */ [data-game="villa-league"] { --rd-accent: #1f8f86; --rd-accent-deep: #17706a; --rd-accent-dark: #0e3f3c; --rd-accent-tint: #e2f2f0; --rd-accent-ink: #2c6b66; --rd-ground-glow-a: rgba(31, 143, 134, .16); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } }