/* ============================================================ bitwar.app — design tokens Single source of truth for spacing, typography, radii, z-index, and touch targets. Components reference these via CSS variables so any global tweak (mobile sizing, density mode, accessibility bump) lands in one place. ============================================================ */ :root { /* Spacing — 4px baseline. Most layout uses 1/2/3/4. */ --bw-space-0: 0; --bw-space-1: 4px; --bw-space-2: 8px; --bw-space-3: 12px; --bw-space-4: 16px; --bw-space-5: 20px; --bw-space-6: 24px; --bw-space-7: 32px; --bw-space-8: 40px; --bw-space-9: 56px; /* Type scale — fluid over the viewport range 320 → 1500 px with a wider min/max spread so phone vs desktop type difference is plainly visible (not just 1–2 px). coeff = (max − min) / (1500 − 320) × 100, offset = min − coeff × 320 / 100. */ --bw-type-2xs: clamp(8px, 0.254vw + 7.19px, 11px); --bw-type-xs: clamp(9px, 0.339vw + 7.92px, 13px); --bw-type-sm: clamp(10px, 0.424vw + 8.64px, 15px); --bw-type-base:clamp(11px, 0.508vw + 9.37px, 17px); --bw-type-md: clamp(12px, 0.678vw + 9.83px, 20px); --bw-type-lg: clamp(14px, 0.847vw + 11.29px, 24px); --bw-type-xl: clamp(16px, 1.186vw + 12.20px, 30px); --bw-type-2xl: clamp(19px, 1.610vw + 13.85px, 38px); --bw-type-3xl: clamp(24px, 2.119vw + 17.22px, 49px); /* Line heights */ --bw-lh-tight: 1.15; --bw-lh-snug: 1.30; --bw-lh-normal: 1.45; --bw-lh-loose: 1.65; /* Radii */ --bw-radius-xs: 4px; --bw-radius-sm: 6px; --bw-radius-md: 8px; --bw-radius-lg: 12px; --bw-radius-xl: 16px; --bw-radius-pill: 999px; /* Borders */ --bw-border-1: 1px; --bw-border-2: 2px; /* Touch target minimums (iOS HIG / Material). On touch devices we enforce ≥ 44px so buttons, nav items, etc. are tappable without missing. Pointer (mouse) keeps the natural sizing. */ --bw-tap-min: 36px; /* Z-index scale */ --bw-z-base: 1; --bw-z-overlay: 30; --bw-z-hud: 400; --bw-z-modal: 9000; --bw-z-toast: 9999; /* Container widths */ --bw-max-content: 1100px; --bw-max-prose: 720px; /* Background palette — kept as variables so dark / "high gfx" themes can swap them without rewriting every component. */ --bw-bg-0: #050507; --bw-bg-1: #0a0a14; --bw-bg-navy: #0a1428; --bw-bg-navy-2: #0f1d3a; --bw-bg-navy-3: #060c1c; /* Accent palette */ --bw-blue: #60a5fa; --bw-blue-soft: #93c5fd; --bw-amber: #fcd34d; --bw-amber-soft: #fde68a; --bw-amber-deep: #f59e0b; --bw-rose: #fb7185; --bw-rose-soft: #fda4af; --bw-emerald: #34d399; --bw-emerald-soft:#6ee7b7; /* Text */ --bw-fg: #e2e8f0; --bw-fg-strong: #ffffff; --bw-fg-muted: #94a3b8; --bw-fg-dim: #64748b; /* Surface (panels, cards) */ --bw-surface-1: rgba(20,20,24,0.96); --bw-surface-2: rgba(13,13,16,0.98); --bw-divider: rgba(255,255,255,0.06); --bw-divider-2: rgba(255,255,255,0.10); /* Default duration ramp */ --bw-dur-fast: .15s; --bw-dur-base: .25s; --bw-dur-slow: .4s; /* Set by responsive.js — components that want fluid scaling can multiply through these. Defaults harmless if JS never runs. */ --bw-vw-scale: 1; } /* ============================================================ Touch devices: bump tap targets without affecting pointer UI. responsive.js sets data-bw-touch="1" on for stylus / fingers. ============================================================ */ html[data-bw-touch="1"] { --bw-tap-min: 44px; } /* Narrow phones (≤ 380 px iPhone SE / mini class) — really tight. Spacings 30–40 % below desktop, tap target floored at 36 px so buttons stay reliably tappable. */ html[data-bw-narrow="1"] { --bw-tap-min: 36px; --bw-space-1: 3px; --bw-space-2: 5px; --bw-space-3: 8px; --bw-space-4: 11px; --bw-space-5: 14px; --bw-space-6: 18px; } /* Mobile (< 600 px) — tighter than tablet/desktop but more breathing room than narrow. Applied even on 414 / 480 px phones so the resbar density matches the device class. */ html[data-bw-device="mobile"]:not([data-bw-narrow="1"]) { --bw-space-1: 4px; --bw-space-2: 7px; --bw-space-3: 11px; --bw-space-4: 15px; --bw-space-5: 18px; --bw-space-6: 22px; --bw-tap-min: 40px; } /* === Type scale OVERRIDES on mobile / narrow =========================== 2× tighter than before per UX request. Floor at ~7 px so labels stay legible on common phone densities. Every component that uses var(--bw-type-*) inherits the smaller sizes automatically. */ html[data-bw-device="mobile"] { --bw-type-2xs: 7px; --bw-type-xs: 8px; --bw-type-sm: 9px; --bw-type-base: 10px; --bw-type-md: 11px; --bw-type-lg: 12px; --bw-type-xl: 14px; --bw-type-2xl: 16px; --bw-type-3xl: 20px; } html[data-bw-narrow="1"] { --bw-type-2xs: 7px; --bw-type-xs: 7.5px; --bw-type-sm: 8.5px; --bw-type-base: 9.5px; --bw-type-md: 10.5px; --bw-type-lg: 11.5px; --bw-type-xl: 13px; --bw-type-2xl: 15px; --bw-type-3xl: 19px; } /* Desktop ceiling — also halved so the whole stack reads tighter. */ html[data-bw-device="desktop"] { --bw-type-2xs: 9px; --bw-type-xs: 10px; --bw-type-sm: 11px; --bw-type-base: 12px; --bw-type-md: 13px; --bw-type-lg: 15px; --bw-type-xl: 17px; --bw-type-2xl: 20px; --bw-type-3xl: 26px; } html[data-bw-device="tablet"] { --bw-type-2xs: 8px; --bw-type-xs: 9px; --bw-type-sm: 10px; --bw-type-base: 11px; --bw-type-md: 12px; --bw-type-lg: 14px; --bw-type-xl: 15px; --bw-type-2xl: 18px; --bw-type-3xl: 22px; } /* ============================================================ Density modes — declared up-front so future settings page can toggle them without code changes. ============================================================ */ html[data-bw-density="compact"] { --bw-space-3: 10px; --bw-space-4: 13px; --bw-space-5: 16px; --bw-space-6: 20px; } html[data-bw-density="cozy"] { --bw-space-3: 14px; --bw-space-4: 18px; --bw-space-5: 24px; --bw-space-6: 28px; } /* ============================================================ Reusable utility classes — small primitive set so components can express "stack with consistent spacing" / "horizontal cluster" / "shrink-on-narrow" without bespoke media queries every time. ============================================================ */ .bw-stack > * + * { margin-top: var(--bw-stack-space, var(--bw-space-3)); } .bw-cluster { display: flex; flex-wrap: wrap; gap: var(--bw-cluster-gap, var(--bw-space-2)); align-items: center; } .bw-row { display: flex; gap: var(--bw-cluster-gap, var(--bw-space-2)); align-items: center; } .bw-tap { min-height: var(--bw-tap-min); min-width: var(--bw-tap-min); display: inline-flex; align-items: center; justify-content: center; } .bw-truncate { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; min-width: 0; } /* ============================================================ Device class hooks — set by responsive.js. CSS can target html[data-bw-device="mobile"] etc. for breakpoint-free rules that key off ACTUAL device class instead of width alone. ============================================================ */ html[data-bw-narrow="1"] { /* < 380px (iPhone SE) */ } html[data-bw-orient="landscape"] { /* phones in landscape */ } html[data-bw-orient="portrait"] { /* phones in portrait */ } /* ============================================================ PHONE THERMAL — Tier 1 mobile heat reductions. Mobile GPUs spend most of their per-frame budget on `backdrop-filter: blur()` shaders, multi-layer gradients with constant repaint, and continuously-running CSS animations. When the device is on a touch viewport (or the OS prefers reduced motion), strip those effects globally so the compositor can stop doing per-frame work on static elements. Pointer (mouse) devices keep the rich treatment. Setting `data-gfx="low"` also enrols every device in this lighter pass — so the auto-degrader (or the manual GFX button) cools the phone without needing a reload. ============================================================ */ html[data-bw-touch="1"] *, html[data-bw-touch="1"] *::before, html[data-bw-touch="1"] *::after, [data-gfx="low"] *, [data-gfx="low"] *::before, [data-gfx="low"] *::after { backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* Kill cosmetic decorations that re-render every frame: radar sweeps, pulse glows, idle spinners. They keep their layout but stop animating. */ html[data-bw-touch="1"] .globe-radar-sweep, html[data-bw-touch="1"] .globe-clock-rose, html[data-bw-touch="1"] .globe-particles, html[data-bw-touch="1"] .land-terminator, [data-gfx="low"] .globe-radar-sweep, [data-gfx="low"] .globe-clock-rose, [data-gfx="low"] .globe-particles, [data-gfx="low"] .land-terminator { display: none !important; animation: none !important; } /* Reduced-motion users: kill every animation everywhere. Cheap and the right thing. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001s !important; animation-iteration-count: 1 !important; transition-duration: 0.001s !important; } } /* Frozen mode — set on by the JS idle watchdog after the user has been inactive long enough. Pauses every CSS animation and dims the page slightly so a glance reveals the screen is resting. Resume happens on the first pointer/keydown. */ html[data-bw-frozen="1"] *, html[data-bw-frozen="1"] *::before, html[data-bw-frozen="1"] *::after { animation-play-state: paused !important; } html[data-bw-frozen="1"] body { filter: brightness(0.78) saturate(0.85); transition: filter .35s ease-out; }