/* ============================================================================================ COCKPIT — the Stupid Bastard Pool design system (§11). Dark-mode-first. This is the go-forward source of truth for design tokens and shared components; it loads AFTER app.css so it wins on any shared class name. New and rebuilt templates should reach for these tokens and the .tile / .chip / .gauge / .pill / .tab-bar primitives rather than hard-coded values. Rules the whole app follows: - GOLD (--gold) is money. Any bank, stake, payout, or dollar figure is gold + tabular-nums. - Team colors are IDENTITY only (an accent edge on a card), NEVER win/loss meaning. - Every win/loss encoding pairs color with a GLYPH (▲ ▼ + − ✓ ✗), never color alone. - Numbers are tabular: use .num (or the tnum utility) on every line, bank, stake, and score. ============================================================================================ */ :root, [data-theme="dark"] { /* Surfaces — from the page floor up to the most-raised card */ --surface-0: #070a0f; /* page background, behind everything */ --surface-1: #121822; /* the default card */ --surface-2: #1a2330; /* a card on a card / input wells */ --surface-3: #202b3a; /* the most-raised chip / hovered row */ /* Text — labels by descending emphasis */ --label-1: #e8eef6; /* primary text */ --label-2: #b6c2d2; /* secondary */ --label-3: #8a98ab; /* muted / captions */ --label-4: #5f6c7e; /* dim / axis ink, disabled */ /* Accent — the electric-blue family (interactive, focus, links, chart marks) */ --accent: #5aa9ff; --accent-strong:#2f7ff0; --accent-soft: rgba(90,169,255,.14); /* Money — gold, and gold only, for anything denominated in points or dollars */ --gold: #f2b94a; --gold-soft: rgba(242,185,74,.12); /* Semantic — win / loss / caution / locked. ALWAYS paired with a glyph on a surface. */ --positive: #1fd18a; --positive-soft: rgba(31,209,138,.14); --negative: #ff5b6a; --negative-soft: rgba(255,91,106,.12); --warning: #f2b94a; --warning-soft: rgba(242,185,74,.12); --locked: #6b7688; /* a game/bet that has locked at kickoff */ --locked-soft: rgba(107,118,136,.14); --hairline: #26303f; /* 1px separators and card borders */ /* Radius + spacing (4pt grid) */ --radius: 16px; /* card radius */ --radius-sm: 10px; /* chips, pills, inputs */ --radius-pill: 999px; --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --tap: 44px; /* minimum touch target */ --tab-h: 60px; /* bottom tab-bar body height (safe-area added on top) */ --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --shadow-1: 0 1px 2px rgba(0,0,0,.4); --shadow-2: 0 6px 24px rgba(0,0,0,.45); } /* Light theme — an override, not the default. Toggled via . */ [data-theme="light"] { --surface-0: #f2f5f9; --surface-1: #ffffff; --surface-2: #f4f7fb; --surface-3: #e8edf4; --label-1: #10151d; --label-2: #35404f; --label-3: #5f6c7e; --label-4: #94a2b4; --accent: #1f74e0; --accent-strong:#155bc0; --accent-soft: rgba(31,116,224,.10); --gold: #b8860b; --gold-soft: rgba(184,134,11,.12); --positive: #0f9d63; --positive-soft: rgba(15,157,99,.12); --negative: #d5323f; --negative-soft: rgba(213,50,63,.10); --warning: #b8860b; --warning-soft: rgba(184,134,11,.12); --locked: #8895a6; --locked-soft: rgba(136,149,166,.14); --hairline: #dbe2ec; --shadow-1: 0 1px 2px rgba(20,30,50,.08); --shadow-2: 0 6px 24px rgba(20,30,50,.12); } /* ---- Numeric utility: tabular figures everywhere a value lives ---- */ .num, .tnum { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* ---- Money: gold + tabular. Use on banks, stakes, payouts, dollar figures. ---- */ .money { color: var(--gold); font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; font-weight: 800; letter-spacing: -.01em; } /* ---- Semantic text + the glyph pairing helpers ---- */ .is-pos { color: var(--positive); } .is-neg { color: var(--negative); } .is-warn { color: var(--warning); } .is-locked { color: var(--locked); } /* ::before glyphs so color is never the only signal (▲ up, ▼ down, ✓ cover, ✗ miss) */ .glyph-up::before { content: "\25B2 "; } /* ▲ */ .glyph-down::before { content: "\25BC "; } /* ▼ */ .glyph-cover::before{ content: "\2713 "; } /* ✓ */ .glyph-miss::before { content: "\2717 "; } /* ✗ */ .glyph-push::before { content: "\2013 "; } /* – */ /* ============================================================================================ SHARED COMPONENTS ============================================================================================ */ /* Tile — the base card. .tiles is a 2-up grid of them. */ .tile { background: var(--surface-1); border: 1px solid var(--hairline); border-radius: var(--radius); padding: var(--sp-4); } .tile .l { font-size: 10px; text-transform: uppercase; letter-spacing: .12em; color: var(--label-3); } .tile .v { font-weight: 800; font-size: 24px; margin-top: var(--sp-1); letter-spacing: -.02em; color: var(--label-1); } .tile .s { font-size: 11px; color: var(--label-3); margin-top: 2px; } .tile.accent { border-color: var(--accent-soft); background: linear-gradient(180deg, var(--accent-soft), transparent); } .tile.money-tile { border-color: var(--gold-soft); background: linear-gradient(180deg, var(--gold-soft), transparent); } /* Chip — a small inline stat/label with a leading accent edge. */ .chip { display: inline-flex; align-items: center; gap: var(--sp-2); min-height: 28px; padding: var(--sp-1) var(--sp-3); background: var(--surface-2); border: 1px solid var(--hairline); border-radius: var(--radius-pill); font-weight: 700; font-size: 13px; color: var(--label-2); } .chip .k { font-size: 9px; text-transform: uppercase; letter-spacing: .12em; color: var(--label-3); font-weight: 700; } .chip.edge-l { border-left: 3px solid var(--label-4); } .chip.up { border-left-color: var(--positive); } .chip.down { border-left-color: var(--negative); } .chip.money { border-left-color: var(--gold); } /* Pill — a compact status tag. Bare .pill only; nested legacy `.section-h .pill` still wins there. */ .pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px var(--sp-2); border-radius: var(--radius-pill); font-size: 11px; font-weight: 700; letter-spacing: .02em; border: 1px solid var(--hairline); color: var(--label-2); } .pill.pos { color: var(--positive); border-color: var(--positive); background: var(--positive-soft); } .pill.neg { color: var(--negative); border-color: var(--negative); background: var(--negative-soft); } .pill.warn { color: var(--warning); border-color: var(--warning); background: var(--warning-soft); } .pill.locked { color: var(--locked); border-color: var(--locked); background: var(--locked-soft); } .pill.money { color: var(--gold); border-color: var(--gold); background: var(--gold-soft); } .pill.accent { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); } /* Gauge — a thin horizontal fill bar (confidence, progress, share of bank). Recessive track, direct label over legend. Set --val (0..1) and optionally --gauge-color. */ .gauge { position: relative; height: 6px; border-radius: var(--radius-pill); background: var(--surface-3); overflow: hidden; } .gauge > .fill { position: absolute; inset: 0 auto 0 0; width: calc(var(--val, 0) * 100%); background: var(--gauge-color, var(--accent)); border-radius: inherit; } .gauge.pos { --gauge-color: var(--positive); } .gauge.neg { --gauge-color: var(--negative); } .gauge.money { --gauge-color: var(--gold); } /* Tab bar — the bottom nav. Reinforces the legacy .tabs with real 44px targets + safe-area insets. The