/* AI Fusion — design tokens (design-v2) * * Theme contract: * - default :root values describe the DARK theme (canonical). * - overrides re-map the palette to a paper-on-ink * light theme. Tokens like --nav-bg are exposed so opaque-but-blurred * surfaces (e.g. .app-nav) don't have to hard-code rgba() values. * - To add a new themeable surface: add a token here, reference it in * app.css instead of a raw color literal. */ :root { /* palette — dark (default) */ --bg-base: #0A0D12; --bg-surface: #111820; --bg-surface-2: #1A2430; --bg-surface-3: #22303F; --border: #1F2A3A; --border-subtle: #15202C; --border-strong: #2B3A4D; --fg: #E6EDF3; --fg-muted: #8B96A5; --fg-subtle: #5B6675; --accent: #00E5FF; --accent-hover: #4DECFF; --accent-pressed: #00B8CC; --accent-muted: rgba(0, 229, 255, 0.10); --accent-ring: rgba(0, 229, 255, 0.35); --on-accent: #001419; --success: #22C55E; --success-muted: rgba(34, 197, 94, 0.14); --warn: #F59E0B; --warn-muted: rgba(245, 158, 11, 0.14); --err: #EF4444; --err-muted: rgba(239, 68, 68, 0.14); /* surface aliases — translucent overlays on blurred surfaces */ --nav-bg: rgba(10, 13, 18, 0.85); --code-block-bg: #0b0f14; /* typography */ --font-sans: "Geist", -apple-system, "Inter", system-ui, "Segoe UI", Roboto, sans-serif; --font-mono: "Geist Mono", "SF Mono", "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace; --fs-xs: 11px; --fs-sm: 12px; --fs-base: 14px; --fs-lg: 16px; --fs-xl: 20px; --fs-2xl: 28px; --fs-3xl: 40px; --fs-4xl: 56px; --lh-tight: 1.2; --lh-body: 1.5; --lh-relaxed: 1.65; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; /* spacing — 4px grid */ --s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px; --s-5: 20px; --s-6: 24px; --s-8: 32px; --s-10: 40px; --s-12: 48px; --s-16: 64px; --s-20: 80px; /* radii + shadows */ --r-sm: 4px; --r-md: 6px; --r-lg: 10px; --r-xl: 14px; --r-full: 9999px; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 4px 16px rgba(0, 0, 0, 0.5); --shadow-lg: 0 12px 40px rgba(0, 0, 0, 0.6); --shadow-accent: 0 0 0 3px var(--accent-ring); /* motion */ --dur-fast: 120ms; --dur: 200ms; --dur-slow: 400ms; --ease: cubic-bezier(0.2, 0, 0, 1); /* layout */ --nav-h: 56px; --page-max: 1200px; --page-px: 24px; } /* ---------- light theme overrides --------------------------------------- * Triggered by (set by app.js bindTheme + an inline * boot script in base.html that runs *before* CSS to avoid FOUC). * Kept additive so dark theme remains a single :root block — easier to scan. */ html[data-theme="light"] { --bg-base: #FAFBFC; --bg-surface: #FFFFFF; --bg-surface-2: #F1F4F8; --bg-surface-3: #E6EBF1; --border: #DFE5EB; --border-subtle: #ECEFF3; --border-strong: #C2CCD6; --fg: #0E1620; --fg-muted: #5B6675; --fg-subtle: #8B96A5; --accent: #0086A6; --accent-hover: #006B86; --accent-pressed: #00536B; --accent-muted: rgba(0, 134, 166, 0.10); --accent-ring: rgba(0, 134, 166, 0.30); --on-accent: #FFFFFF; --success: #16A34A; --success-muted: rgba(22, 163, 74, 0.10); --warn: #D97706; --warn-muted: rgba(217, 119, 6, 0.10); --err: #DC2626; --err-muted: rgba(220, 38, 38, 0.10); --nav-bg: rgba(255, 255, 255, 0.85); --code-block-bg: #F1F4F8; --shadow-sm: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-md: 0 4px 16px rgba(15, 23, 42, 0.08); --shadow-lg: 0 12px 40px rgba(15, 23, 42, 0.12); } /* Smooth toggle — only on theme-affecting properties so we don't slow down * unrelated transitions (hover, focus rings). Skipped on first paint via * .theme-loaded class set in app.js once boot completes. */ html.theme-loaded body, html.theme-loaded .app-nav, html.theme-loaded .card, html.theme-loaded .btn, html.theme-loaded .badge, html.theme-loaded .banner, html.theme-loaded input, html.theme-loaded select, html.theme-loaded textarea, html.theme-loaded pre, html.theme-loaded .code, html.theme-loaded table { transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease); }