/* ============================================================ Flirt Fans — Design tokens Single source of truth for colour, type, spacing, elevation. Both themes are driven by [data-theme] on , stamped by the pre-paint script in base-fans.html before first paint. ============================================================ */ :root { /* ---- brand ---- */ --brand: #1E7FFF; --brand-deep: #0B5FD9; --brand-gradient: linear-gradient(120deg, #1E7FFF, #0B5FD9); --violet: #8B5CF6; --pink: #FF2E7E; /* ---- surfaces ---- */ --surface: #F6F8FB; /* page background */ --card: #FFFFFF; /* raised surface */ --card-alt: #EEF2F7; /* inset / track surface */ --line: #E3E8EF; /* hairline borders */ /* ---- text ---- */ --ink: #101828; /* primary */ --ink-soft: #5B6472; /* secondary / meta */ /* ---- status ---- */ --online: #22C55E; --star: #F5A623; --heart: #F04E6E; --locked: rgba(91,100,114,.55); /* ---- elevation ---- */ --shadow: 0 1px 2px rgba(16,24,40,.05), 0 6px 18px -6px rgba(16,24,40,.10); --shadow-lift: 0 4px 10px rgba(16,24,40,.07), 0 18px 34px -10px rgba(16,24,40,.18); --shadow-brand: 0 4px 14px -4px rgba(30,127,255,.5); /* ---- radii ---- */ --radius-sm: 9px; --radius-md: 12px; --radius-lg: 16px; --radius-xl: 18px; --radius-pill: 999px; /* ---- spacing scale (4pt) ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; /* ---- typography ---- */ --font-display: 'Outfit', system-ui, sans-serif; /* headings, numerals */ --font-body: 'Instrument Sans', system-ui, sans-serif; --text-xs: 10.5px; --text-sm: 11.5px; --text-base: 13px; --text-md: 14px; --text-lg: 16px; --text-xl: 19px; --text-2xl: 23px; --text-3xl: 28px; /* ---- layout ---- */ --page-max: 1240px; --header-height: 59px; /* ---- motion ---- */ --ease: cubic-bezier(.2,.7,.2,1); --dur-fast: .12s; --dur: .2s; } [data-theme="dark"] { --brand: #3D93FF; --brand-deep: #1E7FFF; --brand-gradient: linear-gradient(120deg, #3D93FF, #1E7FFF); --surface: #0E1116; --card: #171C24; --card-alt: #1F2630; --line: #2A323E; --ink: #F2F5F9; --ink-soft: #9AA4B2; --online: #2EE06C; --star: #FFB938; --heart: #FF6B87; --locked: rgba(14,17,22,.68); --shadow: 0 0 0 1px rgba(255,255,255,.03); --shadow-lift: 0 14px 34px -10px rgba(0,0,0,.6); }