/* ═══ SFTi — the PWA stylesheet, one card per section ════════════════════════════ THE CASCADE IS POSITIONAL, so the order in system/system.html IS this list, and it may not be reordered: SHARED — a rule here is used by two or more tabs tokens · reset · tap-targets · glass · shell · panel · primitives · modals PER TAB — a rule here is used by exactly ONE surface, and the card is named for it race · home · scan · discover · telemetry · settings · logs · boot If a per-tab rule turns out to be wanted by a second surface it MOVES up into a shared card rather than being copied — a duplicated rule is how two surfaces drift apart. ═════════════════════════════════════════════════════════════════════════ */ /* ═══ §0 · DESIGN TOKENS ══════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500;600;700&family=Orbitron:wght@400;500;700&display=swap'); :root { /* the PWA is DARK-ONLY regardless of the OS appearance — iOS defaults to light and would otherwise paint its own form controls, scrollbars and root canvas white. */ color-scheme: dark; /* backgrounds */ --bg-void: #040810; /* glass */ --glass-bg: rgba(15, 22, 40, 0.75); --glass-bg-heavy: rgba(10, 15, 26, 0.92); --glass-border: rgba(0, 229, 255, 0.08); --glass-border-active: rgba(0, 229, 255, 0.35); --glass-shine: rgba(255, 255, 255, 0.08); --glass-blur: 30px; /* accents */ --accent-cyan: #00e5ff; --accent-cyan-bright: #6cf8ff; /* the brighter cyan the panels + the theater draw in */ --accent-green: #21854B; --accent-green-bright:#2ECC71; --accent-red: #C74E0A; --accent-red-bright: #E85D2A; --accent-gold: #ffd700; --accent-violet: #a855f7; --accent-orange: #ff8c00; /* THE OUTCOME PALETTE — the scoreboard's own three colours. These are not a surface's colours: Win, Moon and a faded play mean the same thing on every tab, so they are named for the OUTCOME they report rather than the tab that first used them. */ --outcome-win: #3aff8a; --outcome-moon: #ffc84a; --outcome-fade: #ff5a7a; /* text */ --text-primary: rgba(255, 255, 255, 0.95); --text-secondary: rgba(255, 255, 255, 0.55); --text-dim: #7d8fa5; --ink-panel: #d6e4f2; /* body text inside a dark card — softer than --text-primary */ /* glows */ --glow-cyan: 0 0 20px rgba(0, 229, 255, 0.3); --glow-green: 0 0 15px rgba(33, 133, 75, 0.4); --glow-red: 0 0 15px rgba(199, 78, 10, 0.35); --glow-gold: 0 0 20px rgba(255, 215, 0, 0.35); /* typography */ --font-display: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; --font-mono: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; /* spacing */ --sp-xs: 4px; --sp-sm: 8px; --sp-md: 12px; --sp-lg: 16px; --sp-xl: 24px; --sp-xxl: 32px; /* safe areas (iOS notch — top/left/right only; the bottom belongs to the nav) */ --safe-top: env(safe-area-inset-top, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); --status-height: 48px; /* THE BOTTOM RESERVE. The holo-nav is position:fixed, so every scrollable surface needs a clearance equal to what the nav actually occludes. `--nav-height` is the design estimate; `--nav-occlusion` is what app.js MEASURES on the real device and sets on — the measurement wins when it exists. `--nav-float` is the holoFloat animation's travel, which the measurement has to add back because the buttons are mid-float at any instant. */ --nav-height: 92px; --nav-float: 5px; --nav-clearance: calc(var(--nav-occlusion, var(--nav-height)) + env(safe-area-inset-bottom, 0px) + 16px); /* ONE CARD WIDTH, FOR EVERY SURFACE. The card column is declared once here and every card family consumes it; no surface states a width of its own. Measured at 390px before this token, the SAME app drew five different cards (366 · 366 · 350 · 342 · 302) because each surface added its own inset on top of the shell's. --shell-w scales the column with the viewport so a desktop is not a phone with margins; --card-peek is the carousel member. */ --shell-w: min(100%, clamp(600px, 62vw, 900px)); --card-w: 100%; --card-peek: clamp(264px, 78%, 520px); }