/* ============================================================ Blood Bowl Companion — css/tokens.css Shared design tokens. Loaded BEFORE all other stylesheets. Z-INDEX SCALE — every overlay layer on the site, lowest to highest. Values match the pre-token numbers so relative order is preserved; always use the var, never a raw number. NOTE: the pass wizard keeps an internal 50/200/300 picker stack; those are relative values inside the panel's own stacking context and intentionally stay local. ============================================================ */ :root { /* ── Z-index layers ── */ --z-base: 0; --z-card-overlay: 10; /* status/effect badges on cards */ --z-dice: 100; /* dice always above wizard stage chrome */ --z-gamebar: 200; --z-panel-backdrop: 350; --z-panel: 400; /* wizard panels (block/pass/foul/throw/special) */ --z-tooltip: 500; /* skill tooltips, above panels */ --z-drive-backdrop: 598; --z-drive-pill: 599; --z-drive: 600; /* drive wizard modal */ --z-drawer: 700; /* settings drawer, page overlays */ --z-overlay-page: 800; /* spp / team-builder full-page overlays */ --z-toast: 900; --z-drag-ghost: 9999; /* pitch drag ghost */ /* ── Dice sizing ── Inside FitScale stages the transform already scales dice, so these stay fixed design px there; fluid contexts (drive wizard, plain panels) may override them with clamp(). */ --dice-size: 60px; /* d6 / d8 face */ --block-die-size: 72px; /* block die face */ /* ── Spacing / radius / type scale ── */ --bb-space-1: 0.25rem; --bb-space-2: 0.5rem; --bb-space-3: 0.75rem; --bb-space-4: 1rem; --bb-space-5: 1.5rem; --bb-space-6: 2.25rem; --bb-radius: 10px; --bb-radius-lg: 16px; --bb-font-sm: clamp(0.7rem, 0.65rem + 0.25vw, 0.85rem); --bb-font-md: clamp(0.85rem, 0.78rem + 0.35vw, 1.05rem); --bb-font-lg: clamp(1.1rem, 1rem + 0.6vw, 1.7rem); /* ── UI Refinement design language (handoff Phase 1) ── Type roles: Nuffle = display/names/stamps; Barlow Condensed = labels/nav/ buttons; Barlow = body/flavour/pills; JetBrains Mono = NUMBERS ONLY. */ --bb-font-display: 'Nuffle', 'Barlow Condensed', serif; --bb-font-head: 'Barlow Condensed', system-ui, sans-serif; --bb-font-body: 'Barlow', system-ui, sans-serif; --bb-font-num: 'JetBrains Mono', ui-monospace, monospace; /* App background (apply to , background-attachment: fixed) */ --bb-bg: radial-gradient(120% 80% at 25% -5%, rgba(36,74,170,0.42) 0%, transparent 55%), radial-gradient(120% 90% at 90% 105%, rgba(14,36,120,0.40) 0%, transparent 52%), linear-gradient(168deg, #05091a 0%, #091634 58%, #060e22 100%); --bb-text: #eaf0ff; --bb-text-muted: rgba(190,212,255,0.62); --bb-text-faint: rgba(150,185,255,0.45); --bb-hairline: rgba(120,160,255,0.14); /* 1px borders on dark glass */ --bb-highlight: rgba(255,255,255,0.07); /* inset "light from above" */ --bb-gold-grad: linear-gradient(180deg, #f4d977 0%, #e0b53f 48%, #c9991f 100%); /* Parchment / card surface (light) */ --bb-parchment: linear-gradient(180deg, rgba(244,243,239,0.97), rgba(228,228,224,0.95)); /* Glass surfaces */ --bb-panel-bg: linear-gradient(180deg, rgba(13,24,56,0.60), rgba(8,15,38,0.66)); --bb-panel-border: 1px solid var(--bb-hairline); --bb-panel-shadow: 0 16px 40px rgba(0,0,0,0.40), inset 0 1px 0 rgba(255,255,255,0.05); /* Sticky bars (header / game bar) */ --bb-bar-bg: rgba(6,12,30,0.72); --bb-bar-blur: blur(18px) saturate(1.4); /* Team accent — overwritten per team; derive tints via color-mix. */ --team-accent: #3b6fe0; }