/* * F018 -- Household RPG design tokens + global base. * * This is the single source of truth for colour, typography, spacing, * radii, framing, motion and layout metrics, per * HOUSEHOLD_RPG_VISUAL_DESIGN_SYSTEM_v1 section 19/20. Nothing below this * file should declare a raw hex colour, a raw pixel gap, or a font stack -- * component files consume these variables instead. The token names * introduced in F013 (--rpg-surface, --rpg-border, --rpg-accent, ...) are * kept as aliases at the end so no F013-F017 rule breaks while the * component layer migrates onto the approved names. */ :root { /* ---- Foundation surfaces ---- */ --rpg-bg-950: #080D16; --rpg-bg-900: #0D1522; --rpg-surface-850: #121D2C; --rpg-surface-800: #172538; --rpg-surface-750: #1D2D42; --rpg-line: #33465E; --rpg-text: #F5F0E5; --rpg-text-muted: #B5C0CC; /* ---- Brand / metal trim ---- */ --rpg-gold: #E3B955; --rpg-gold-bright: #F4D77A; --rpg-bronze: #9A6A3A; --rpg-parchment: #E9DFC4; /* ---- Game state ---- */ --rpg-xp: #52D3C7; --rpg-skill: #9D83F3; --rpg-points: #F0C95D; --rpg-success: #65D787; --rpg-danger: #F06A68; --rpg-warning: #F0A94D; --rpg-info: #65A9F3; --rpg-quest: #D879E8; /* Ink used on top of a saturated accent fill (gold/green/blue buttons). Dark enough to clear WCAG AA against every accent above. */ --rpg-ink: #0B1220; /* ---- Typography ---- */ --font-display: "Cinzel", Georgia, serif; --font-ui: "Nunito Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --font-stat: "Roboto Mono", "SFMono-Regular", Consolas, monospace; --type-display-xl: 36px; --type-display-l: 28px; --type-heading-m: 22px; --type-heading-s: 18px; --type-body: 16px; --type-compact: 14px; --type-hud-label: 11px; /* ---- Spacing (4px scale) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; /* ---- Radii (deliberately small -- no universal 16-24px SaaS rounding) ---- */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 10px; /* ---- Interaction ---- */ --touch-min: 44px; --touch-display: 56px; /* ---- Framing ---- */ --shadow-panel: inset 0 1px 0 rgba(255, 255, 255, .05), 0 8px 24px rgba(0, 0, 0, .28); --shadow-button: inset 0 1px 0 rgba(255, 255, 255, .08), 0 2px 0 rgba(0, 0, 0, .45); --shadow-button-pressed: inset 0 2px 4px rgba(0, 0, 0, .45); --border-panel: 1px solid var(--rpg-line); --focus-ring: 0 0 0 2px var(--rpg-bg-950), 0 0 0 4px var(--rpg-gold-bright); --chamfer: polygon( 0 0, calc(100% - 12px) 0, 100% 12px, 100% 100%, 12px 100%, 0 calc(100% - 12px) ); /* ---- Motion ---- */ --motion-hover: 120ms; --motion-panel: 180ms; --motion-state: 220ms; --motion-meter: 400ms; --ease-out: cubic-bezier(.2, .7, .3, 1); /* ---- Layers ---- */ --z-content: 1; --z-topbar: 20; --z-tabbar: 30; --z-popover: 40; /* ---- Content widths ---- */ --width-page: 1280px; --width-column: 760px; --width-display: 1680px; --gutter-phone: var(--space-4); --gutter-desktop: var(--space-8); /* ---- F013-F017 aliases ----------------------------------------------- Older rules and any view still referencing the first-generation names resolve onto the approved palette instead of the old off-brand one. */ --rpg-bg: var(--rpg-bg-900); --rpg-surface: var(--rpg-surface-850); --rpg-surface-raised: var(--rpg-surface-800); --rpg-border: var(--rpg-line); --rpg-border-strong: #46607E; --rpg-accent: var(--rpg-gold); --rpg-accent-strong: var(--rpg-gold-bright); --rpg-claimable: var(--rpg-info); --rpg-track: #060A11; --rpg-radius-sm: var(--radius-sm); --rpg-radius-md: var(--radius-md); --rpg-radius-lg: var(--radius-lg); --rpg-space-1: var(--space-1); --rpg-space-2: var(--space-2); --rpg-space-3: var(--space-3); --rpg-space-4: var(--space-4); --rpg-space-5: var(--space-6); --rpg-space-6: var(--space-8); --rpg-shadow-panel: var(--shadow-panel); --rpg-font-display: var(--font-display); --rpg-font-body: var(--font-ui); /* Bootstrap sets scroll-behavior: smooth on :root, which interferes with Turbo's scroll preservation during morphs. */ scroll-behavior: auto !important; } /* ---------- Global base ---------------------------------------------- Applied to every page, not just the game shell: the sign-in, register, invitation-acceptance and household-creation screens render outside the shell and were otherwise falling through to raw browser defaults on a white page -- the single most obvious "default framework styling" leak in the product. */ html { background: var(--rpg-bg-950); } body { margin: 0; min-height: 100vh; background: radial-gradient(1200px 600px at 50% -10%, rgba(227, 185, 85, .06), transparent 70%), var(--rpg-bg-900); color: var(--rpg-text); font-family: var(--font-ui); font-size: var(--type-body); font-weight: 500; line-height: 1.45; -webkit-font-smoothing: antialiased; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; color: var(--rpg-text); } h1 { font-size: var(--type-display-l); line-height: 1.15; margin: 0 0 var(--space-4); } h2 { font-size: var(--type-heading-m); line-height: 1.2; margin: 0 0 var(--space-3); } h3 { font-size: var(--type-heading-s); line-height: 1.25; margin: 0 0 var(--space-2); } h4 { font-size: var(--type-body); line-height: 1.3; margin: 0 0 var(--space-2); } a { color: var(--rpg-gold-bright); text-underline-offset: 2px; } a:hover { color: var(--rpg-gold); } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--radius-sm); } hr { border: none; border-top: 1px solid var(--rpg-line); margin: var(--space-6) 0; } /* ---------- Reduced motion (global no-animation path) ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } }