/* Battle Barge — Design Tokens ================================================================ Single source of truth for ALL color, typography, spacing, and motion values used by the shared shell. Both universes load this file unchanged; the active universe is selected by the `data-universe` attribute on the root element. -> Horus Heresy values win -> The Old World values win Shell components must NEVER hardcode colors or fonts. Always reference --bb-* variables so a universe switch re-themes the entire page in one CSS recalc. ================================================================ */ /* Cross-document smooth fade between hub <-> /hh/ <-> /tow/. Mirrored inline in templates/bb/hub.html so the hub also opts in. Browsers without View Transitions silently ignore these rules. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 500ms; animation-timing-function: ease-in-out; } /* Load both font families up front so the universe switch has no FOIT (flash of invisible text). Each font pair is ~20kB with display=swap, so loading both on every page is cheap. */ @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Rajdhani:wght@300;400;500;600;700&display=swap'); @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400&display=swap'); /* ---------------------------------------------------------------- Universe-agnostic tokens. Identical in HH and TOW. ---------------------------------------------------------------- */ :root { /* Spacing scale (4px base) */ --bb-space-1: 4px; --bb-space-2: 8px; --bb-space-3: 12px; --bb-space-4: 16px; --bb-space-6: 24px; --bb-space-8: 32px; --bb-space-12: 48px; /* Radius */ --bb-radius-sm: 4px; --bb-radius-md: 8px; --bb-radius-lg: 12px; --bb-radius-full: 9999px; /* Shadow */ --bb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.4); --bb-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.5); --bb-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.6); /* Transition */ --bb-transition-fast: 150ms ease; --bb-transition-base: 250ms ease; --bb-transition-slow: 600ms ease; /* universe cross-fade */ /* Touch target (iOS HIG minimum) */ --bb-touch-min: 44px; /* Type scale */ --bb-text-xs: 0.75rem; --bb-text-sm: 0.875rem; --bb-text-base: 1rem; --bb-text-lg: 1.125rem; --bb-text-xl: 1.25rem; --bb-text-2xl: 1.5rem; --bb-text-3xl: 2rem; --bb-text-4xl: 2.5rem; /* Player colors — identical across universes so a player's color identity doesn't shift when they switch games. */ --bb-player-1: #3b82f6; /* blue */ --bb-player-2: #ef4444; /* red */ --bb-player-3: #10b981; /* green */ --bb-player-4: #f59e0b; /* amber */ /* Neutral fallbacks used before a universe is picked (e.g. hub landing before the user enters HH or TOW). Overridden below. */ --bb-bg-base: #0b0b10; --bb-bg-surface: #14141c; --bb-bg-elevated: #1d1d28; --bb-bg-input: #22222e; --bb-text-primary: #e6e8eb; --bb-text-secondary: #a8adb8; --bb-text-muted: #7a8599; --bb-accent-primary: #d4af37; --bb-accent-secondary:#8b4513; --bb-accent-danger: #e53e3e; --bb-accent-success: #38a169; --bb-accent-warning: #d69e2e; --bb-border: #2d2d3d; --bb-border-focus: var(--bb-accent-primary); --bb-font-display: 'Orbitron', 'Segoe UI', sans-serif; --bb-font-body: 'Rajdhani', 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------- Horus Heresy — futuristic, imperial gold & deep steel ---------------------------------------------------------------- */ html[data-universe="hh"] { --bb-bg-base: #08080d; --bb-bg-surface: #101018; --bb-bg-elevated: #181824; --bb-bg-input: #1e1e2e; --bb-text-primary: #e2e8f0; --bb-text-secondary: #a0aec0; --bb-text-muted: #7a8599; /* WCAG AA 4.8:1 on --bb-bg-base */ --bb-accent-primary: #d4af37; /* imperial gold */ --bb-accent-secondary:#8b0000; /* imperial red */ --bb-accent-danger: #e53e3e; --bb-accent-success: #38a169; --bb-accent-warning: #d69e2e; --bb-border: #2d2d3d; --bb-border-focus: var(--bb-accent-primary); /* Phase colors — HH has 5 phases */ --bb-phase-1: #22d3ee; /* start — cyan */ --bb-phase-2: #3b82f6; /* movement — blue */ --bb-phase-3: #ef4444; /* shooting — red */ --bb-phase-4: #f97316; /* assault — orange */ --bb-phase-5: #eab308; /* end — yellow */ --bb-font-display: 'Orbitron', 'Segoe UI', sans-serif; --bb-font-body: 'Rajdhani', 'Segoe UI', sans-serif; } /* ---------------------------------------------------------------- The Old World — aged wood, parchment, forest green ---------------------------------------------------------------- */ html[data-universe="tow"] { --bb-bg-base: #0d0b08; /* warm black */ --bb-bg-surface: #1a1610; --bb-bg-elevated: #242018; --bb-bg-input: #2e2820; /* worn leather */ --bb-text-primary: #e8e0d0; /* parchment */ --bb-text-secondary: #a89b85; --bb-text-muted: #6b6155; --bb-accent-primary: #c9a84c; /* aged gold */ --bb-accent-secondary:#2d5a27; /* forest green */ --bb-accent-danger: #c41e3a; --bb-accent-success: #2d8b4e; --bb-accent-warning: #d4a017; --bb-border: #3a3228; /* hammered iron */ --bb-border-focus: var(--bb-accent-primary); /* Phase colors — TOW has 4 phases */ --bb-phase-1: #D4A017; /* strategy — gold */ --bb-phase-2: #2E8B57; /* movement — green */ --bb-phase-3: #C41E3A; /* shooting — red */ --bb-phase-4: #D2691E; /* combat — ember orange */ --bb-font-display: 'Cinzel', 'Iowan Old Style', Georgia, serif; --bb-font-body: 'Crimson Text', Georgia, serif; } /* ---------------------------------------------------------------- Cross-fade transition for universe switches. Any element whose color is driven by --bb-* tokens will smoothly interpolate when the data-universe attribute flips. Font-family is intentionally NOT transitioned — browsers can't tween font swaps and typography change is meant to be instant. ---------------------------------------------------------------- */ html, body, .bb-header, .bb-bottom-nav, .bb-sub-nav, .bb-hub, .bb-hub-half, .bb-card, .bb-btn, .bb-modal, .bb-modal-backdrop, .bb-toast, .bb-input, .bb-select { transition: background-color var(--bb-transition-slow), color var(--bb-transition-slow), border-color var(--bb-transition-slow); } /* Honor the user's OS-level motion preference. Drops the cross-fade to a near-instant swap; keeps accessibility-first behavior. */ @media (prefers-reduced-motion: reduce) { html, body, .bb-header, .bb-bottom-nav, .bb-sub-nav, .bb-hub, .bb-hub-half, .bb-card, .bb-btn, .bb-modal, .bb-modal-backdrop, .bb-toast, .bb-input, .bb-select { transition-duration: 80ms; } } /* ---------------------------------------------------------------- LIGHT THEME OVERRIDES Activated by Settings > Theme > Light. Settings.js sets `data-theme="light"` on ; combined with the universe attr, the selectors below override the dark-default tokens above. Approach: invert backgrounds/text but KEEP universe accent colors (gold, imperial red, forest green) since those are the brand identity, not chrome. ---------------------------------------------------------------- */ html[data-theme="light"] { --bb-bg-base: #f5f3ee; --bb-bg-surface: #fbfaf6; --bb-bg-elevated: #ffffff; --bb-bg-input: #ffffff; --bb-text-primary: #1c1a16; --bb-text-secondary: #4a4742; --bb-text-muted: #6f6c66; --bb-border: #d4cfc4; --bb-shadow-sm: 0 1px 2px rgba(60, 50, 30, 0.10); --bb-shadow-md: 0 4px 10px rgba(60, 50, 30, 0.12); --bb-shadow-lg: 0 8px 22px rgba(60, 50, 30, 0.18); } /* Horus Heresy — light variant: cool ivory + steel-blue text, gold stays */ html[data-universe="hh"][data-theme="light"] { --bb-bg-base: #f3f4f7; --bb-bg-surface: #fafbfd; --bb-bg-elevated: #ffffff; --bb-bg-input: #ffffff; --bb-text-primary: #161a24; --bb-text-secondary: #3a4252; --bb-text-muted: #6a7280; --bb-border: #c7ccd8; } /* The Old World — light variant: parchment + walnut text, aged gold stays */ html[data-universe="tow"][data-theme="light"] { --bb-bg-base: #f4ecd8; --bb-bg-surface: #fbf5e3; --bb-bg-elevated: #fffaec; --bb-bg-input: #fffaec; --bb-text-primary: #2a1d10; --bb-text-secondary: #5a4630; --bb-text-muted: #7d6850; --bb-border: #cdb88a; } /* ---------------------------------------------------------------- Legacy token aliases ---------------------------------------------------------------- The HH and TOW component CSS files reference --color-*, --space-*, --text-*, --font-*, --touch-min, --radius-*, --shadow-* directly. When any of those CSS files load inside the unified shell (which only ships bb-tokens.css for theming), the legacy variables would resolve to "" — every rule using them silently rendered as black on black or zero-padded. Mapping the legacy names onto our --bb-* values lets the entire HH/TOW component layer render correctly under the unified shell without per-file forks. ---------------------------------------------------------------- */ :root { /* Spacing */ --space-xs: var(--bb-space-1); --space-sm: var(--bb-space-2); --space-md: var(--bb-space-3); --space-lg: var(--bb-space-4); --space-xl: var(--bb-space-6); --space-1: var(--bb-space-1); --space-2: var(--bb-space-2); --space-3: var(--bb-space-3); --space-4: var(--bb-space-4); --space-5: var(--bb-space-4); --space-6: var(--bb-space-6); --space-8: var(--bb-space-8); --space-12: var(--bb-space-12); /* Type */ --text-xs: var(--bb-text-xs); --text-sm: var(--bb-text-sm); --text-base: var(--bb-text-base); --text-lg: var(--bb-text-lg); --text-xl: var(--bb-text-xl); --text-2xl: var(--bb-text-2xl); --text-3xl: var(--bb-text-3xl); /* Radius */ --radius-sm: var(--bb-radius-sm); --radius-md: var(--bb-radius-md); --radius-lg: var(--bb-radius-lg); --radius-full: var(--bb-radius-full); /* Shadow */ --shadow-sm: var(--bb-shadow-sm); --shadow-md: var(--bb-shadow-md); --shadow-lg: var(--bb-shadow-lg); /* Misc */ --touch-min: var(--bb-touch-min); --transition-fast: var(--bb-transition-fast); --transition-base: var(--bb-transition-base); --transition-slow: var(--bb-transition-slow); --font-display: var(--bb-font-display); --font-body: var(--bb-font-body); /* Colors */ --color-bg-base: var(--bb-bg-base); --color-bg: var(--bb-bg-base); --color-surface: var(--bb-bg-surface); --color-surface-raised: var(--bb-bg-elevated); --color-elevated: var(--bb-bg-elevated); --color-input: var(--bb-bg-input); --color-bg-input: var(--bb-bg-input); --color-text-primary: var(--bb-text-primary); --color-text: var(--bb-text-primary); --color-text-secondary: var(--bb-text-secondary); --color-text-muted: var(--bb-text-muted); --color-border: var(--bb-border); --color-border-focus: var(--bb-border-focus); --color-accent: var(--bb-accent-primary); --color-accent-primary: var(--bb-accent-primary); --color-gold: var(--bb-accent-primary); --color-secondary: var(--bb-accent-secondary); --color-error: var(--bb-accent-danger); --color-danger: var(--bb-accent-danger); --color-success: var(--bb-accent-success); --color-warning: var(--bb-accent-warning); /* Phase colors — HH 5-phase + TOW 4-phase aliases live in universe-scoped blocks; the legacy code references them by index. */ --color-phase-1: var(--bb-phase-1, var(--bb-accent-primary)); --color-phase-2: var(--bb-phase-2, var(--bb-accent-primary)); --color-phase-3: var(--bb-phase-3, var(--bb-accent-primary)); --color-phase-4: var(--bb-phase-4, var(--bb-accent-primary)); --color-phase-5: var(--bb-phase-5, var(--bb-accent-primary)); /* Player colors */ --player-1: var(--bb-player-1); --player-2: var(--bb-player-2); --player-3: var(--bb-player-3); --player-4: var(--bb-player-4); /* HH legacy short names (used in static/hh/css/screens/battle.css) */ --bg-root: var(--bb-bg-base); --bg-surface: var(--bb-bg-surface); --bg-elevated: var(--bb-bg-elevated); --bg-input: var(--bb-bg-input); --gold: var(--bb-accent-primary); --imperial-red: var(--bb-accent-secondary); --text-primary: var(--bb-text-primary); --text-secondary: var(--bb-text-secondary); --text-muted: var(--bb-text-muted); --border: var(--bb-border); --border-strong: var(--bb-border); --border-focus: var(--bb-border-focus); --error: var(--bb-accent-danger); --success: var(--bb-accent-success); --warning: var(--bb-accent-warning); --gold-rgb: 212, 175, 55; }