/* ========================================================================== FutureAI2026 — Design Tokens (single source of truth) Dark is default. Light overrides via [data-theme="light"] on . Font family is swappable in ONE place: --fa-font-sans / --fa-font-mono. ========================================================================== */ :root{ /* fonts (swap here to change site-wide) */ --fa-font-sans:"IBM Plex Sans Arabic", system-ui, "Segoe UI", Tahoma, sans-serif; --fa-font-mono:"IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace; /* brand signature (theme-agnostic) */ --fa-primary:#4F7DFF; --fa-primary-hover:#6B92FF; --fa-primary-press:#3D67E0; --fa-accent:#16E0C4; --fa-violet:#8B5CF6; --fa-success:#22C55E; --fa-warning:#F5A623; --fa-danger:#F04E4E; /* DARK surfaces/text (default) */ --fa-bg:#0A0E1A; --fa-surface:#111726; --fa-surface-2:#171F30; --fa-elevated:#1C2437; --fa-border:#232C42; --fa-border-strong:#33405E; --fa-text:#E7ECF5; --fa-text-muted:#9AA6BF; --fa-text-faint:#66728C; --fa-shadow-2:0 6px 20px rgba(0,0,0,.35); --fa-glow:0 0 0 1px rgba(79,125,255,.4),0 8px 30px rgba(79,125,255,.25); color-scheme: dark; } :root[data-theme="light"]{ --fa-bg:#F7F8FB; --fa-surface:#FFFFFF; --fa-surface-2:#F1F4FA; --fa-elevated:#FFFFFF; --fa-border:#E3E8F0; --fa-border-strong:#CDD5E3; --fa-text:#0F1524; --fa-text-muted:#54607A; --fa-text-faint:#8A94A8; --fa-shadow-2:0 6px 20px rgba(16,24,40,.10); --fa-glow:0 0 0 1px rgba(79,125,255,.35),0 8px 30px rgba(79,125,255,.18); color-scheme: light; } /* Respect OS preference on first load when user hasn't chosen */ @media (prefers-color-scheme: light){ :root:not([data-theme]){ --fa-bg:#F7F8FB; --fa-surface:#FFFFFF; --fa-surface-2:#F1F4FA; --fa-elevated:#FFFFFF; --fa-border:#E3E8F0; --fa-border-strong:#CDD5E3; --fa-text:#0F1524; --fa-text-muted:#54607A; --fa-text-faint:#8A94A8; --fa-shadow-2:0 6px 20px rgba(16,24,40,.10); color-scheme: light; } }