/* ══════════════════════════════════════════════════════════════════════════ BET99 VICTORY DESIGN TOKENS — R2 CANONICAL SOURCE. Every colour, space, radius, shadow, type step, border, motion duration and z-index in BET99 resolves here. No other file may introduce a raw colour literal. Direction : VICTORY-DRIVEN PREMIUM OPS · dark premium command centre Balance : 70% disciplined finance · 20% premium identity · 10% victory Rule : accounting semantics override brand semantics. Gold is EMPHASIS, never "profit". Positive = success, negative = danger. Contrast : every text token below was measured (WCAG 2.1 relative luminance) against all four surfaces. Ratios in comments are against --b99-surface #0E1B2D unless stated. ══════════════════════════════════════════════════════════════════════════ */ :root { /* ── FOUNDATION · surfaces ─────────────────────────────────────────────── */ --b99-bg-deep: #07111F; /* sidebar, login field, deepest ground */ --b99-bg: #0A1424; /* app canvas */ --b99-surface: #0E1B2D; /* cards, panels, table body */ --b99-surface-raised: #13233A; /* hover, sub-panels, active rows */ --b99-surface-overlay: #182B45; /* modals, dropdowns, tooltips */ /* ── FOUNDATION · borders ──────────────────────────────────────────────── */ --b99-border-subtle: #1A2A42; /* interior dividers, dashed rules */ --b99-border: #253652; /* default component edge */ --b99-border-strong: #4A6A98; /* 3.14:1 — interactive boundaries */ /* ── BRAND · gold (emphasis only) ──────────────────────────────────────── */ --b99-gold: #D8AD4A; /* 8.24:1 — safe as text and as fill */ --b99-gold-strong: #F0C95B; /* 10.89:1 — hover / hero accent */ --b99-gold-soft: #8D7136; /* 3.75:1 — NON-TEXT ONLY: rules, edge */ --b99-gold-tint: rgba(216,173,74,.10); --b99-gold-line: rgba(216,173,74,.34); --b99-on-gold: #07111F; /* 9.01:1 — white on gold is 2.10 FAIL */ /* ── TEXT ──────────────────────────────────────────────────────────────── */ --b99-text: #F5F7FA; /* 16.13:1 */ --b99-text-secondary: #AAB5C5; /* 8.34:1 */ --b99-text-muted: #828FA3; /* 5.28:1 · 4.82:1 on raised (AA) */ --b99-text-inverse: #0A1424; /* on any light/solid fill */ /* ── SEMANTIC · accounting outranks brand ──────────────────────────────── */ --b99-success: #22C77A; /* 7.84:1 — positive financial result */ --b99-success-tint: rgba(34,199,122,.12); --b99-success-line: rgba(34,199,122,.34); --b99-on-success: #04160D; /* 8.46:1 */ --b99-warning: #F2B84B; /* 9.67:1 — attention, needs action */ --b99-warning-tint: rgba(242,184,75,.13); --b99-warning-line: rgba(242,184,75,.34); --b99-on-warning: #1A1204; /* 10.36:1 */ --b99-danger: #EF626C; /* 5.47:1 — loss, destructive, blocker */ --b99-danger-tint: rgba(239,98,108,.13); --b99-danger-line: rgba(239,98,108,.36); --b99-on-danger: #07111F; /* 5.98:1 — white would be 3.17 FAIL */ --b99-info: #5598F6; /* 5.94:1 — neutral information */ --b99-info-tint: rgba(85,152,246,.13); --b99-info-line: rgba(85,152,246,.34); --b99-on-info: #07111F; /* 6.50:1 */ /* One ink for text sitting on ANY solid brand/status fill. Worst case is danger at 5.98:1; white would be 2.10:1 on gold and 3.17:1 on danger. */ --b99-on-solid: #07111F; /* ── FINANCIAL PRESENTATION (§20) ──────────────────────────────────────── */ --b99-pos: var(--b99-success); --b99-neg: var(--b99-danger); --b99-zero: var(--b99-text-muted); /* muted but visible */ --b99-missing: var(--b99-warning); /* MISSING != 0 */ /* ── CHART SERIES (§42) — restrained, no rainbow. Each >= 3.0:1 on surface, so a series is distinguishable as a graphical object (WCAG 1.4.11). */ --b99-series-1: #D8AD4A; /* 8.24 — primary / highlighted series */ --b99-series-2: #5598F6; /* 5.94 */ --b99-series-3: #22C77A; /* 7.84 */ --b99-series-4: #8FA0C0; /* 6.56 — neutral secondary */ --b99-series-5: #C489C7; /* 6.39 */ --b99-series-6: #46B5B5; /* 7.04 */ /* ── AMBIENT (§23) — the only decorative fills in the system. Victory is expressed as controlled ascending vectors, never glow or confetti. */ --b99-vector: rgba(216,173,74,.055); --b99-vector-soft: rgba(216,173,74,.03); --b99-halo: rgba(85,152,246,.07); --b99-hatch: rgba(130,143,163,.045); /* Alpha-mask sentinel. Not a visible colour: only its ALPHA is read by mask-image, so the hue never reaches the screen. Lives here because the token file is the one place a literal is allowed. */ --b99-mask-opaque: #000; /* ── SPACING (§12) ─────────────────────────────────────────────────────── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 48px; /* ── RADIUS (§12) — restrained; dense accounting tables, not a phone app ─ */ --radius-sm: 6px; --radius-md: 10px; --radius-lg: 14px; --radius-xl: 18px; --radius-pill: 999px; /* ── DEPTH (§13) — dark UI leads with BORDER; shadow is restrained ─────── */ --elev-surface: none; --elev-raised: 0 1px 2px rgba(0,0,0,.34); --elev-dropdown: 0 6px 18px rgba(0,0,0,.44); --elev-modal: 0 18px 48px rgba(0,0,0,.56); --scrim: rgba(3,8,16,.68); /* ── TYPOGRAPHY (§8) — NO external font/CDN. System stack only. ────────── */ --font-ui: "Inter", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Be Vietnam Pro", Roboto, Arial, sans-serif; --font-head: var(--font-ui); --font-num: "Inter", ui-monospace, system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Consolas", monospace; --fw-body: 400; --fw-medium: 500; --fw-semi: 600; --fw-bold: 700; --fw-display: 800; --fs-micro: 11px; --fs-xs: 12px; --fs-sm: 13px; --fs-base: 13.5px; --fs-md: 15px; --fs-lg: 17px; --fs-xl: 21px; --fs-kpi: 25px; --fs-hero: 30px; --fs-title: 26px; --ls-micro: .5px; --ls-title: -.3px; /* ── MOTION (§52) — 100–180ms, no bounce, no celebration ───────────────── */ --mo-fast: 110ms; --mo-base: 150ms; --mo-slow: 180ms; --mo-ease: cubic-bezier(.22,.61,.36,1); /* ── Z-INDEX ───────────────────────────────────────────────────────────── */ --z-sticky: 5; --z-drawer-backdrop: 39; --z-drawer: 40; --z-modal: 50; --z-popover: 60; --z-toast: 9999; } /* ══ LEGACY VARIABLE BRIDGE ════════════════════════════════════════════════ The component layer (public/css/styles.css) and the business JS modules were authored against the names below. They are RESOLVED to Victory tokens here rather than being renamed across ~13,000 lines of working business code — §60/§61: a visual change stays visually scoped. These are aliases, NOT a second token set (§71). ══════════════════════════════════════════════════════════════════════════ */ :root { --bg: var(--b99-bg); --panel: var(--b99-surface); --sidebar: var(--b99-bg-deep); --navy: var(--b99-surface-raised); /* emphasis SURFACE (see --emph-ink) */ --emph-ink: var(--b99-text); /* emphasis TEXT — was #10213D */ --ink: var(--b99-text); --muted: var(--b99-text-muted); --line: var(--b99-border); --brand: var(--b99-gold); --brand-ink: var(--b99-gold-strong); --on-brand: var(--b99-on-gold); /* text on any --brand fill */ --hover: var(--b99-surface-raised); --accent: var(--b99-info); --green: var(--b99-success); --green-bg: var(--b99-success-tint); --red: var(--b99-danger); --red-bg: var(--b99-danger-tint); --blue: var(--b99-info); --orange: var(--b99-warning); --border: var(--b99-border); --panel-2: var(--b99-surface-raised); --text: var(--b99-text); --radius: var(--radius-lg); --shadow: var(--elev-raised); --font-head: var(--font-ui); }