/* ============================================================ FitHez Brand Tokens — Single Source of Truth Version: 1.0 Last updated: 2026-05-14 To change brand colors site-wide, edit ONLY this file. Every page should to this file in . ============================================================ */ :root { /* ---------- PRIMARY BRAND COLORS ---------- */ --fh-primary-blue: #0A84FF; --fh-electric-blue: #005DFF; --fh-cyan-accent: #19C6FF; --fh-glow-accent: #1F6BFF; /* ---------- DARK SURFACES ---------- */ --fh-bg-dark: #050816; --fh-bg-card: #0B1225; --fh-bg-elevated: #0F1A30; --fh-bg-input: #0B1225; /* ---------- TEXT ---------- */ --fh-text-primary: #F5F7FA; --fh-text-secondary: #B8C3D6; --fh-text-muted: #8B96A8; --fh-text-disabled: #555F73; /* ---------- GOLD (VIP / Premium tier ONLY) ---------- */ --fh-gold: #FFB800; --fh-gold-soft: #FFC940; /* ---------- SEMANTIC COLORS ---------- */ --fh-success: #22C55E; --fh-warning: #F59E0B; --fh-error: #EF4444; --fh-info: #0A84FF; /* ---------- BORDERS ---------- */ --fh-border-subtle: rgba(255, 255, 255, 0.06); --fh-border-default: rgba(255, 255, 255, 0.10); --fh-border-strong: rgba(255, 255, 255, 0.18); --fh-border-blue: rgba(10, 132, 255, 0.40); --fh-border-blue-hi: rgba(10, 132, 255, 0.80); /* ---------- GRADIENTS ---------- */ --fh-gradient-blue: linear-gradient(135deg, #0A84FF 0%, #005DFF 100%); --fh-gradient-cyan: linear-gradient(135deg, #19C6FF 0%, #0A84FF 100%); --fh-gradient-card: linear-gradient(180deg, #0B1225 0%, #050816 100%); --fh-gradient-glow: radial-gradient(circle, rgba(10,132,255,0.30) 0%, transparent 70%); /* ---------- SHADOWS & GLOWS ---------- */ --fh-shadow-card: 0 4px 24px rgba(0, 0, 0, 0.40); --fh-shadow-elevated: 0 8px 40px rgba(0, 0, 0, 0.60); --fh-glow-blue-sm: 0 0 12px rgba(10, 132, 255, 0.50); --fh-glow-blue-md: 0 0 24px rgba(10, 132, 255, 0.55); --fh-glow-blue-lg: 0 0 48px rgba(10, 132, 255, 0.60); --fh-glow-cyan: 0 0 20px rgba(25, 198, 255, 0.65); /* ---------- SPACING ---------- */ --fh-space-xs: 4px; --fh-space-sm: 8px; --fh-space-md: 16px; --fh-space-lg: 24px; --fh-space-xl: 32px; --fh-space-2xl: 48px; --fh-space-3xl: 64px; /* ---------- RADIUS ---------- */ --fh-radius-sm: 8px; --fh-radius-md: 12px; --fh-radius-lg: 16px; --fh-radius-xl: 24px; --fh-radius-pill: 999px; /* ---------- TYPOGRAPHY ---------- */ --fh-font-heading: 'Inter', system-ui, -apple-system, sans-serif; --fh-font-body: 'Inter', system-ui, -apple-system, sans-serif; --fh-weight-regular: 400; --fh-weight-medium: 500; --fh-weight-semibold: 600; --fh-weight-bold: 700; --fh-weight-black: 900; --fh-text-xs: 12px; --fh-text-sm: 14px; --fh-text-base: 16px; --fh-text-lg: 18px; --fh-text-xl: 20px; --fh-text-2xl: 24px; --fh-text-3xl: 32px; --fh-text-4xl: 40px; /* ---------- MOTION ---------- */ --fh-ease-out: cubic-bezier(0.16, 1, 0.3, 1); --fh-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); --fh-duration-fast: 150ms; --fh-duration-base: 250ms; --fh-duration-slow: 400ms; /* ---------- Z-INDEX ---------- */ --fh-z-base: 1; --fh-z-dropdown: 100; --fh-z-sticky: 200; --fh-z-modal-bg: 900; --fh-z-modal: 1000; --fh-z-toast: 2000; --fh-z-tooltip: 3000; }