/* ────────────────────────────────────────────────────────────────────── * VITALITY DESIGN TOKENS * * Single source of truth for type, color, and surface treatments. * Loaded in alongside vitality-app-shell.css so all pages * inherit the brand system. * * Brand atmosphere = the conic-gradient rainbow (logo, wheel, avatar, * hero backgrounds) — that is the Vitality identifier. * Everything else is disciplined. * ────────────────────────────────────────────────────────────────────── */ /* Brand typography — loaded once here, used everywhere */ @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=DM+Sans:wght@300;400;500;600;700&family=Caveat:wght@400;600;700&family=Playfair+Display:ital,wght@0,400;1,500&family=Raleway:wght@300;400;500;600;700&display=swap'); :root { /* ── TEXT COLORS (limited to 3 brand text colors + neutrals per brand doc) ── */ --text-default: #F0F0F0; /* dark mode body */ --text-muted: rgba(240,240,240,0.62); --text-faint: rgba(240,240,240,0.42); --text-pink: #FF2D9B; /* primary highlight */ --text-yellow: #FFE600; /* stats / numbers / milestones */ --text-green: #39FF14; /* success / wins / live state */ /* ── EXTENDED PALETTE — for ICONS & GRAPHICS ONLY (per brand doc) ── */ --brand-pink: #FF2D9B; --brand-yellow: #FFE600; --brand-green: #39FF14; --brand-purple: #9B2DFF; --brand-blue: #0057FF; --brand-orange: #FF6B1A; /* ── SURFACES (dark mode default) ── */ --bg: #080808; --bg-elevated: #0d0d0d; --card: #141414; --card-elevated: #181818; --border: rgba(255,255,255,0.07); --border-strong: rgba(255,255,255,0.14); /* ── THE RAINBOW — used only in 4 sanctioned places ── */ --rainbow-conic: conic-gradient(from 0deg, #FF2D9B 0%, #9B2DFF 16.6%, #0057FF 33.3%, #39FF14 50%, #FFE600 66.6%, #FF6B1A 83.3%, #FF2D9B 100%); /* Soft rainbow for hero/welcome backgrounds (lower saturation, ~30% alpha) */ --rainbow-soft: radial-gradient(ellipse at 15% 5%, rgba(255,45,155,0.16), transparent 50%), radial-gradient(ellipse at 95% 90%, rgba(155,45,255,0.14), transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(255,230,0,0.06), transparent 60%); /* ── TYPOGRAPHY — reverted to original ── */ --font-display: 'Bebas Neue', 'Impact', sans-serif; --font-body: 'DM Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-italic: 'Playfair Display', serif; --font-marker: 'Caveat', cursive; /* Type scale — restrained vs. previous Bebas Neue heights */ --type-display-xl: 40px; --type-display-lg: 32px; --type-display-md: 24px; --type-display-sm: 18px; --type-body-lg: 16px; --type-body-md: 14px; --type-body-sm: 13px; --type-body-xs: 11.5px; --type-eyebrow: 10.5px; /* Tracking */ --tracking-display: 0.005em; --tracking-body: 0.005em; --tracking-eyebrow: 0.22em; /* ── SPACING (4-pt scale) ── */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; /* ── RADIUS ── */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* ── ELEVATION ── */ --el-card: 0 1px 3px rgba(0,0,0,0.3), 0 8px 24px rgba(0,0,0,0.18); --el-hover: 0 4px 12px rgba(0,0,0,0.35), 0 16px 40px rgba(0,0,0,0.28); --el-modal: 0 8px 24px rgba(0,0,0,0.4), 0 32px 80px rgba(0,0,0,0.55); } /* ── SUN MODE OVERRIDES ── */ html[data-theme="light"] { --text-default: #1a1a1a; --text-muted: rgba(26,26,26,0.62); --text-faint: rgba(26,26,26,0.42); --bg: #FAF8F4; --bg-elevated: #FFFFFF; --card: #FFFFFF; --card-elevated: #FAF8F4; --border: rgba(26,26,26,0.08); --border-strong: rgba(26,26,26,0.18); } /* ────────────────────────────────────────────────────────────────────── * GLOBAL TYPOGRAPHY ENFORCEMENT * * Body = Raleway · Display = DM Serif Display · Marker = Permanent Marker * These !important rules ensure the brand fonts win against any leftover * font-family declarations in page-level