/* ============================================================================= PB Pro Leagues — design tokens Phase 0: DEFINITIONS ONLY. This file declares CSS custom properties (and the redesign fonts) but applies NO styles to any element or class, so importing it changes nothing visually until components opt in (Phase 1+). Layer 1 (primitives) + Layer 3 (semantic state) are shared across all leagues. Layer 2 (accent / energy / ink) swaps per league via [data-tenant]. Accents are RGB triplets so Tailwind opacity modifiers (e.g. bg-accent/50) work. ============================================================================= */ @import url("https://fonts.googleapis.com/css2?family=Akshar:wght@400;500;600;700&family=Onest:wght@400;500;600;700&display=swap"); :root { /* ---- Layer 1: primitives (shared) ---- */ --surface-page: #ffffff; --surface-soft: #fafafa; --surface-card: #ffffff; --surface-inverse: #101828; --text-primary: #1f1f1f; --text-secondary: #717171; --text-on-inverse: #ffffff; --border-default: #e6e6e6; --border-strong: #d4d4d4; --radius-none: 0px; --radius-pill: 9999px; --font-display: "Akshar", "Bebas Neue", system-ui, sans-serif; --font-body: "Onest", ui-sans-serif, system-ui, sans-serif; --motion-fast: 140ms; --motion-base: 240ms; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); /* ---- Layer 3: semantic state (shared, never per-tenant) ---- */ --state-live: #e5341c; --state-ok: #1f7d3a; --state-warn: #c58a14; --focus-ring: #008adb; --fantasy-accent: #b2e620; --fantasy-ink: #101828; /* ---- Layer 2 default (AFPL) ---- */ --accent-rgb: 0 138 219; /* #008ADB */ --accent-energy-rgb: 178 230 32; /* #B2E620 */ --tenant-ink-rgb: 16 24 40; /* #101828 */ } /* ---- Layer 2: per-tenant identity (finalized 2026-06) ---- AFPL and MiLP share the PB Pro accent; MiLP only swaps its logo (handled in the nav/config, not here). FPAC uses its own blue #203468. */ [data-tenant="afpl"] { --accent-rgb: 0 138 219; --accent-energy-rgb: 178 230 32; --tenant-ink-rgb: 16 24 40; } [data-tenant="milp"] { --accent-rgb: 0 138 219; --accent-energy-rgb: 178 230 32; --tenant-ink-rgb: 16 24 40; } /* FPAC brand is #203468, but that navy is nearly the dark-theme background, so it reads as invisible for accents/links. Brightened to #3C74E0 for the dark UI. */ [data-tenant="fpac"] { --accent-rgb: 60 116 224; --accent-energy-rgb: 178 230 32; --tenant-ink-rgb: 16 24 40; } /* Convenience non-alpha forms (Tailwind uses the *-rgb triplets for opacity). */ :root { --accent: rgb(var(--accent-rgb)); --accent-energy: rgb(var(--accent-energy-rgb)); --tenant-ink: rgb(var(--tenant-ink-rgb)); } /* Dark mode is OPT-IN only (set data-theme="dark" on ). We deliberately do NOT auto-flip on OS preference yet, because most app surfaces are not dark-ready. A dedicated dark-mode phase can switch this on later. */ [data-theme="dark"] { --surface-page: #0b0f1a; --surface-soft: #111726; --surface-card: #141b2c; --surface-inverse: #050810; --text-primary: #f4f6fb; --text-secondary: #99a1b3; --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.18); } @media (prefers-reduced-motion: reduce) { :root { --motion-fast: 0ms; --motion-base: 0ms; } }