/* ========================================================================== Backstage v2 — Design Tokens ========================================================================== Drop-in CSS custom properties for the v2 visual direction. Lift these straight into the iPad app's web/styles.css or merge them into theme/backstage-tokens.css. Used by every file in v2-mockups/. The mockups all import these same values — change a token here and every mockup updates. Conventions: - Dark-mode first (warm dark base, cream text on top) - Five-color accent system keyed to event types - Fraunces (display) + Inter (body) typography - Spacing in 4px increments Author: Jackie + design pass, 2026 Status: ready for production use ========================================================================== */ :root { /* ========== SURFACES (warm dark base) ================================== */ --bs-bg: #0F0E0C; /* App background — primary surface */ --bs-bg-2: #15130F; /* Lifted — toolbars, headers */ --bs-bg-3: #1E1A14; /* Elevated — sticky bars, sub-surfaces */ --bs-bg-card: #1A1713; /* Card / panel surface */ --bs-bg-elev: #232019; /* Highest — buttons at rest */ /* ========== TEXT ======================================================= */ --bs-text: #F5F2EB; /* Primary cream */ --bs-muted: #8A847A; /* Secondary — subdued, still readable */ --bs-soft: #5E594F; /* Tertiary — timestamps, footnotes */ /* ========== HAIRLINES ================================================== */ --bs-hairline: rgba(245, 242, 235, 0.08); /* Default border */ --bs-hairline-strong: rgba(245, 242, 235, 0.14); /* Emphasized border */ /* ========== ACCENT PALETTE (event color system) ======================== */ /* Mint — brand · new buyer · default sale dopamine moment */ --bs-mint: #5FE6A4; --bs-mint-deep: #2FBE7E; --bs-mint-soft: rgba(95, 230, 164, 0.14); --bs-mint-glow: rgba(95, 230, 164, 0.40); --bs-mint-on: #0A1F12; /* Text on mint backgrounds */ /* Peach — returning buyer · warm celebration */ --bs-peach: #F4C9A8; --bs-peach-soft: rgba(244, 201, 168, 0.14); --bs-peach-glow: rgba(244, 201, 168, 0.40); --bs-peach-on: #2A1B0F; /* Gold — giveaway · first-purchase star */ --bs-gold: #F2C95E; --bs-gold-soft: rgba(242, 201, 94, 0.14); --bs-gold-glow: rgba(242, 201, 94, 0.45); --bs-gold-on: #2A1F0F; /* Coral — raid · attention without alarm */ --bs-coral: #F47C7C; --bs-coral-soft: rgba(244, 124, 124, 0.14); --bs-coral-glow: rgba(244, 124, 124, 0.40); --bs-coral-on: #3A0E0E; /* Emerald — tip · echoes Whatnot's chat tip-chip green */ --bs-emerald: #34D399; --bs-emerald-soft: rgba(52, 211, 153, 0.14); --bs-emerald-glow: rgba(52, 211, 153, 0.40); --bs-emerald-on: #052E1F; /* ========== TYPOGRAPHY ================================================= */ /* Load via Google Fonts: */ --bs-font-serif: 'Fraunces', Georgia, serif; --bs-font-sans: 'Inter', system-ui, sans-serif; --bs-font-mono: 'SF Mono', Menlo, ui-monospace, monospace; /* Key Fraunces variable-font axis settings. Use as: font-variation-settings: var(--bs-serif-soft); */ --bs-serif-soft: "SOFT" 100; /* Soft retro variant */ --bs-serif-accent: "SOFT" 100, "WONK" 1; /* For italic accent moments */ /* ========== SPACING SCALE (4px-based) ================================== */ --bs-space-1: 4px; --bs-space-2: 8px; --bs-space-3: 12px; --bs-space-4: 16px; --bs-space-5: 20px; --bs-space-6: 24px; --bs-space-8: 32px; --bs-space-10: 40px; --bs-space-12: 48px; --bs-space-16: 64px; /* ========== RADII ====================================================== */ --bs-r-sm: 6px; /* Pills, small buttons */ --bs-r-md: 10px; /* Inputs, small cards */ --bs-r-lg: 14px; /* Standard cards */ --bs-r-xl: 18px; /* Large cards, full popups */ --bs-r-pill: 100px; /* Pills, fully rounded buttons */ /* ========== ELEVATION (shadows) ======================================== */ --bs-shadow-card: 0 24px 60px -16px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(0, 0, 0, 0.3); --bs-shadow-card-elev: 0 30px 80px -20px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(0, 0, 0, 0.3); /* ========== ANIMATION TIMING =========================================== */ --bs-t-fast: 0.15s ease; --bs-t-base: 0.22s cubic-bezier(0.18, 0.84, 0.22, 1.12); --bs-t-pulse: 1.6s ease-in-out infinite; --bs-t-glow: 2.8s ease-in-out infinite; } /* ========================================================================== HELPER PATTERNS Reusable classes you can apply on top of card/popup elements to get the colored aura per accent type. Pair with --bs-bg-card for the surface. ========================================================================== */ .bs-glow-mint { box-shadow: var(--bs-shadow-card), 0 0 0 4px rgba(95, 230, 164, 0.06), 0 8px 32px -8px var(--bs-mint-glow); border-color: rgba(95, 230, 164, 0.32); } .bs-glow-peach { box-shadow: var(--bs-shadow-card), 0 0 0 4px rgba(244, 201, 168, 0.06), 0 8px 32px -8px var(--bs-peach-glow); border-color: rgba(244, 201, 168, 0.32); } .bs-glow-gold { box-shadow: var(--bs-shadow-card), 0 0 0 4px rgba(242, 201, 94, 0.07), 0 8px 32px -8px var(--bs-gold-glow); border-color: rgba(242, 201, 94, 0.34); } .bs-glow-coral { box-shadow: var(--bs-shadow-card), 0 0 0 4px rgba(244, 124, 124, 0.06), 0 8px 32px -8px var(--bs-coral-glow); border-color: rgba(244, 124, 124, 0.32); } .bs-glow-emerald { box-shadow: var(--bs-shadow-card), 0 0 0 4px rgba(52, 211, 153, 0.06), 0 8px 32px -8px var(--bs-emerald-glow); border-color: rgba(52, 211, 153, 0.32); } /* ========================================================================== KEYFRAMES Reusable animations across the system. Apply with: animation: bs-pulse var(--bs-t-pulse); animation: bs-fresh-glow var(--bs-t-glow); ========================================================================== */ @keyframes bs-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } } @keyframes bs-fresh-glow { 0%, 100% { box-shadow: 0 0 0 4px rgba(95, 230, 164, 0.05), 0 8px 22px -8px rgba(95, 230, 164, 0.30); } 50% { box-shadow: 0 0 0 6px rgba(95, 230, 164, 0.10), 0 12px 32px -8px rgba(95, 230, 164, 0.55); } } @keyframes bs-popup-takeover { 0% { opacity: 0; transform: translateY(36px) scale(0.9); } 55% { opacity: 1; transform: translateY(-4px) scale(1.01); } 100% { opacity: 1; transform: translateY(0) scale(1); } }