/* FranchiseHQ — Design Tokens (CSS) * * Generated from franchisehq.tokens.json. * Single source of truth for the web platform. * * Usage: * * ...then in your CSS use var(--cyan), var(--text-primary), etc. * * For dark/light theme toggle, set . */ /* ─── BASE / DARK THEME (default) ──────────────────────────────────── */ :root, :root[data-theme="dark"] { /* Brand */ --cyan: #00D4FF; --cyan-dim: #0099BB; --gold: #F0B429; --gold-dim: #9A7010; --blue: #1A6FD4; /* Brand aliases used by newer app pages and audit docs */ --brand-primary: var(--cyan); --brand-primary-dim: var(--cyan-dim); --brand-secondary: #3B9EFF; --brand-accent: var(--gold); --brand-accent-dim: var(--gold-dim); /* Neutral scale */ --n-0: #FFFFFF; --n-50: #F5F8FF; --n-100: #E8EDF5; --n-200: #C7D3E5; --n-300: #6B8AB5; /* matches production --muted across 7 pages */ --n-400: #4A6080; /* matches production --muted2 across 7 pages */ --n-500: #3A5070; /* deepest text-dimmed seen (analytics page) */ --n-600: #2A3550; --n-700: #1A2E50; --n-800: #111F35; --n-850: #0D1A2E; --n-900: #0A1628; --n-950: #060E1A; --n-1000: #04080F; /* Status */ --success: #22C55E; --warning: #F97316; --error: #EF4444; --info: var(--cyan); /* Semantic — bg */ --bg: var(--n-950); --bg-canvas: var(--n-950); --bg-surface: var(--n-900); --bg-card: var(--n-850); --bg-card-hi: var(--n-800); --bg-sidebar: var(--n-1000); /* Semantic — text */ --text: var(--n-100); --text-primary: var(--n-100); --text-secondary: var(--n-200); --text-muted: var(--n-300); --text-dimmed: var(--n-400); --text-inverse: var(--n-950); /* Semantic — border */ --border: var(--n-700); --border-strong: var(--n-600); --divider: rgba(255, 255, 255, 0.07); /* Legacy aliases — keep for back-compat with existing inline CSS */ --bg2: var(--bg-surface); --card: var(--bg-card); --card2: var(--bg-card-hi); --cyan2: var(--cyan-dim); --muted: var(--text-muted); --muted2: var(--text-dimmed); --green: var(--success); --red: var(--error); --orange: var(--warning); /* Bridge tokens — promoted from per-page inline :root{} blocks during * design-token consolidation. Once every page imports tokens.css and * removes its own inline copy, audit which of these are still needed. */ --primary: var(--cyan); /* alias used by league pages */ --accent: var(--gold); /* alias used by league pages, analytics */ --blue-b: #3b9eff; /* lighter blue accent — pricing/about/reviews */ --border2: #243050; /* alternate border shade — pricing/about/reviews/analytics */ --surface: #0c1220; /* surface variant — pricing/about/reviews */ --surface2: #111827; /* deeper surface — pricing/about/reviews */ --green-bg: rgba(34, 197, 94, 0.12); /* tinted success bg */ --orange-bg: rgba(249, 115, 22, 0.12); /* tinted warning bg */ --red-bg: rgba(239, 68, 68, 0.12); /* tinted error bg */ --purple: #a78bfa; /* analytics KPI accent */ --ai-text: var(--purple); /* AI-generated content accent */ /* Typography */ --font-display: 'Barlow Condensed', sans-serif; --font-body: 'Barlow', sans-serif; --font-mono: 'JetBrains Mono', monospace; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --fw-extrabold: 800; --fw-black: 900; --fs-xs: 11px; --fs-sm: 13px; --fs-base: 15px; --fs-md: 17px; --fs-lg: 22px; --fs-xl: 28px; --fs-2xl: 38px; --fs-3xl: 56px; --ls-tight: -1px; --ls-normal: 0; --ls-wide: 0.5px; --ls-wider: 1.5px; --ls-widest: 2px; --lh-tight: 0.95; --lh-snug: 1.2; --lh-normal: 1.5; --lh-relaxed: 1.65; --lh-loose: 1.75; /* Spacing — 8px base grid */ --space-0: 0; --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; /* Border radius */ --r-none: 0; --r-xs: 3px; --r-sm: 4px; --r-md: 7px; --r-lg: 10px; --r-xl: 14px; --r-pill: 999px; /* Sizing */ --tap-min: 44px; --sidebar-w: 220px; --sidebar-w-mobile: 280px; --mob-bar-h: 48px; --container-max: 1100px; /* Shadows */ --shadow-card-hover: 0 6px 24px rgba(0, 180, 255, 0.08); --shadow-cta-glow: 0 4px 24px rgba(0, 212, 255, 0.3); --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.5); /* Motion */ --t-fast: 150ms; --t-default: 250ms; --t-slow: 400ms; --ease: cubic-bezier(0.4, 0, 0.2, 1); } /* ─── LIGHT THEME (opt-in via data-theme="light") ──────────────────── */ :root[data-theme="light"] { --bg: var(--n-50); --bg-canvas: var(--n-50); --bg-surface: var(--n-0); --bg-card: var(--n-0); --bg-card-hi: var(--n-50); --bg-sidebar: var(--n-0); --text: var(--n-950); --text-primary: var(--n-950); --text-secondary: var(--n-600); --text-muted: var(--n-500); --text-dimmed: var(--n-400); --text-inverse: var(--n-0); --border: var(--n-200); --border-strong: var(--n-300); --divider: rgba(10, 22, 40, 0.10); /* Legacy aliases for light theme */ --bg2: var(--bg-surface); --card: var(--bg-card); --card2: var(--bg-card-hi); --muted: var(--text-muted); --muted2: var(--text-dimmed); /* Adjust shadows for light bg */ --shadow-card-hover: 0 6px 24px rgba(0, 0, 0, 0.08); --shadow-modal: 0 24px 80px rgba(0, 0, 0, 0.15); } /* Shared interaction primitives */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--brand-primary); outline-offset: 2px; } .fhq-skeleton { position: relative; overflow: hidden; color: transparent; background: linear-gradient(90deg, var(--bg-card), var(--bg-card-hi), var(--bg-card)); background-size: 200% 100%; animation: fhq-skeleton-shimmer 1.2s ease-in-out infinite; } @keyframes fhq-skeleton-shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } /* ─── HIGH-CONTRAST MODE (auto via media query) ────────────────────── */ @media (prefers-contrast: more) { :root { --text-muted: var(--n-100); --text-dimmed: var(--n-200); --border: var(--n-500); } } /* ─── REDUCED-MOTION (auto via media query) ────────────────────────── */ @media (prefers-reduced-motion: reduce) { :root { --t-fast: 0ms; --t-default: 0ms; --t-slow: 0ms; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }