/* ============================================================ ExecuFunction Design Tokens Two sibling systems: 1. Marketing — "Cognitive Clarity" (editorial dark) 2. Product — "Neo-Bauhaus" (zinc + bauhaus blue) ============================================================ Usage: Apply a system by setting a class on or any container: or If no class is set, the default is exf-app (dark app theme) because the app is where users live. Fonts: the marketing site uses Bricolage Grotesque + Newsreader + IBM Plex Mono, all loaded from Google Fonts below. The app uses Poppins + Comfortaa + Geist Mono. Geist Mono ships locally from fonts/GeistMono-Variable.ttf; the others are Google Fonts fallbacks (the brand previously shipped Satoshi for the editorial italic "Knowledge View" — flagged as a substitution, see README). */ /* --- Web font imports ------------------------------------- */ @import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,200..800&family=Newsreader:ital,opsz,wght@0,6..72,200..800;1,6..72,200..800&family=IBM+Plex+Mono:wght@400;500&family=Poppins:wght@300;400;500;600;700&family=Comfortaa:wght@400;500;600;700&display=swap'); @font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-Variable.ttf') format('truetype-variations'); font-weight: 100 900; font-style: normal; font-display: swap; } /* ============================================================ 1. BASE TOKENS — always available as CSS vars. Prefix with --exf- to avoid collision in host apps. ============================================================ */ :root { /* -------- Type families -------- */ --exf-font-marketing-display: 'Bricolage Grotesque', system-ui, sans-serif; --exf-font-marketing-body: 'Bricolage Grotesque', system-ui, sans-serif; --exf-font-marketing-editorial:'Newsreader', Georgia, 'Times New Roman', serif; --exf-font-marketing-mono: 'IBM Plex Mono', 'Geist Mono', ui-monospace, monospace; --exf-font-app-body: 'Poppins', -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif; --exf-font-app-display: 'Comfortaa', 'Poppins', -apple-system, sans-serif; --exf-font-app-mono: 'Geist Mono', 'SF Mono', 'Fira Code', Menlo, Consolas, ui-monospace, monospace; /* -------- Marketing palette -------- */ --exf-void: #07070e; /* near-black */ --exf-surface: #0f1018; /* first ladder step */ --exf-surface-2: #171720; --exf-surface-3: #1e1e2a; --exf-text: #e8e4df; /* warm off-white */ --exf-text-2: #8a8a9a; /* secondary */ --exf-text-dim: #4e4e5e; /* tertiary / placeholder */ --exf-cream: #f0ece2; /* breakout sections */ --exf-cream-text: #1a1a22; --exf-mint: #00e4a8; /* marketing PRIMARY accent */ --exf-mint-strong: #00ffbb; --exf-mint-glow: rgba(0, 228, 168, 0.12); --exf-blue: #5b8def; /* intelligence */ --exf-amber: #f5a623; /* warmth */ --exf-coral: #ff6b5a; /* urgency / dissent */ /* Subtle overlays (on dark) */ --exf-white-04: rgba(255, 255, 255, 0.04); --exf-white-06: rgba(255, 255, 255, 0.06); --exf-white-08: rgba(255, 255, 255, 0.08); --exf-white-10: rgba(255, 255, 255, 0.10); /* -------- Product app palette (Neo-Bauhaus) -------- */ --exf-zen-bg: #000000; /* true black */ --exf-zen-card: #09090b; /* zinc-950 */ --exf-zen-panel: #18181b; /* zinc-900 */ --exf-zen-border: #27272a; /* zinc-800 */ --exf-zen-text: #fafafa; /* slate-50 */ --exf-zen-muted: #a1a1aa; /* zinc-400 */ --exf-zen-dim: #71717a; /* zinc-500 */ --exf-bauhaus-blue: #1e40ff; /* app PRIMARY — deep ultramarine, Klein-blue territory */ --exf-bauhaus-blue-2: #4b63ff; /* hover lift — saturated, same hue */ --exf-bauhaus-yellow: #f5b700; --exf-bauhaus-coral: #ff6b6b; --exf-bauhaus-green: #2dc2a3; --exf-bauhaus-purple: #8b5cf6; /* -------- Spacing (marketing scale) -------- */ --exf-space-xs: 8px; --exf-space-sm: 16px; --exf-space-md: 24px; --exf-space-lg: 48px; --exf-space-xl: 80px; --exf-space-2xl: 120px; /* -------- Spacing (app scale — tighter) -------- */ --exf-app-space-1: 4px; --exf-app-space-2: 8px; --exf-app-space-3: 12px; --exf-app-space-4: 16px; --exf-app-space-5: 20px; --exf-app-space-6: 24px; --exf-app-space-8: 32px; /* -------- Radii -------- */ --exf-radius-xs: 4px; --exf-radius-sm: 6px; --exf-radius-md: 8px; /* default buttons/inputs */ --exf-radius-lg: 12px; /* app cards */ --exf-radius-xl: 16px; /* marketing cards, browser frames */ --exf-radius-2xl: 20px; /* pricing cards */ --exf-radius-pill: 999px; /* status pills */ /* -------- Shadows -------- */ --exf-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.25); --exf-shadow-md: 0 8px 24px rgba(0, 0, 0, 0.35); --exf-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.5); --exf-shadow-xl: 0 24px 80px rgba(0, 0, 0, 0.5); --exf-shadow-glow-mint: 0 8px 32px rgba(0, 228, 168, 0.25); --exf-shadow-glow-blue: 0 8px 32px rgba(30, 64, 255, 0.25); --exf-shadow-inset: inset 0 0 0 1px rgba(255, 255, 255, 0.04); /* -------- Borders -------- */ --exf-border-subtle: 1px solid rgba(255, 255, 255, 0.04); --exf-border: 1px solid rgba(255, 255, 255, 0.06); --exf-border-strong: 1px solid rgba(255, 255, 255, 0.10); --exf-border-dashed: 1px dashed rgba(255, 255, 255, 0.12); /* -------- Layout -------- */ --exf-max-width: 1200px; --exf-max-width-narrow: 840px; --exf-max-width-wide: 1400px; --exf-nav-height: 72px; --exf-app-header-height: 64px; /* -------- Motion -------- */ --exf-ease-out: cubic-bezier(0.22, 1, 0.36, 1); --exf-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --exf-duration-fast: 120ms; --exf-duration-mid: 200ms; --exf-duration-slow: 700ms; } /* ============================================================ 2. SEMANTIC TOKENS + BASE ELEMENTS — scoped to system class ============================================================ */ /* ---------- Marketing: Cognitive Clarity ---------- */ .exf-marketing { /* Semantic */ --fg-1: var(--exf-text); --fg-2: var(--exf-text-2); --fg-3: var(--exf-text-dim); --bg-0: var(--exf-void); --bg-1: var(--exf-surface); --bg-2: var(--exf-surface-2); --bg-3: var(--exf-surface-3); --accent: var(--exf-mint); --accent-strong: var(--exf-mint-strong); --accent-glow: var(--exf-mint-glow); --border-c: rgba(255, 255, 255, 0.06); font-family: var(--exf-font-marketing-body); font-weight: 350; font-size: 17px; line-height: 1.65; color: var(--fg-1); background: var(--bg-0); -webkit-font-smoothing: antialiased; } .exf-marketing h1, .exf-marketing h2, .exf-marketing h3, .exf-marketing h4, .exf-marketing h5 { font-family: var(--exf-font-marketing-display); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; color: var(--fg-1); } .exf-marketing h1, .exf-marketing .h1 { font-size: clamp(48px, 6vw, 96px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; } .exf-marketing h2, .exf-marketing .h2 { font-size: clamp(32px, 3.5vw, 56px); font-weight: 700; letter-spacing: -0.025em; } .exf-marketing h3, .exf-marketing .h3 { font-size: clamp(22px, 2vw, 28px); font-weight: 600; letter-spacing: -0.015em; } .exf-marketing p { color: var(--fg-1); } .exf-marketing .editorial, .exf-marketing em { font-family: var(--exf-font-marketing-editorial); font-style: italic; } .exf-marketing .kicker, .exf-marketing .label { font-family: var(--exf-font-marketing-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } .exf-marketing code, .exf-marketing .mono { font-family: var(--exf-font-marketing-mono); font-size: 0.92em; } .exf-marketing a { color: var(--exf-mint); text-decoration: none; transition: color var(--exf-duration-mid) ease; } .exf-marketing a:hover { color: var(--accent-strong); } /* ---------- Product app: Neo-Bauhaus ---------- */ .exf-app { /* Semantic */ --fg-1: var(--exf-zen-text); --fg-2: var(--exf-zen-muted); --fg-3: var(--exf-zen-dim); --bg-0: var(--exf-zen-bg); --bg-1: var(--exf-zen-card); --bg-2: var(--exf-zen-panel); --bg-3: var(--exf-zen-border); --accent: var(--exf-bauhaus-blue); --accent-strong: #4b63ff; --accent-glow: rgba(30, 64, 255, 0.18); --danger: #d94141; /* orange-shifted destructive red, muted at rest */ --danger-strong: #ef5350; /* saturates on hover */ --border-c: rgba(255, 255, 255, 0.06); font-family: var(--exf-font-app-body); font-weight: 400; font-size: 14px; line-height: 1.5; color: var(--fg-1); background: var(--bg-0); -webkit-font-smoothing: antialiased; letter-spacing: -0.01em; } .exf-app h1, .exf-app h2, .exf-app h3, .exf-app h4 { font-family: var(--exf-font-app-display); font-weight: 600; letter-spacing: -0.025em; color: var(--fg-1); } .exf-app h1 { font-size: 30px; line-height: 36px; } .exf-app h2 { font-size: 24px; line-height: 32px; } .exf-app h3 { font-size: 18px; line-height: 28px; font-weight: 500; } .exf-app h4 { font-size: 15px; line-height: 22px; font-weight: 500; } .exf-app .brand-text { font-family: var(--exf-font-app-display); font-weight: 700; letter-spacing: -0.02em; } .exf-app code, .exf-app .mono, .exf-app kbd { font-family: var(--exf-font-app-mono); font-size: 0.92em; } .exf-app kbd { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border: 1px solid rgba(255, 255, 255, 0.12); border-radius: var(--exf-radius-sm); background: rgba(255, 255, 255, 0.04); color: var(--fg-2); font-size: 11px; font-weight: 500; } .exf-app .kicker { font-family: var(--exf-font-app-mono); font-weight: 500; font-size: 11px; letter-spacing: 0.10em; text-transform: uppercase; color: var(--fg-3); } .exf-app a { color: var(--accent); text-decoration: none; transition: color var(--exf-duration-fast) ease; } .exf-app a:hover { color: var(--accent-strong); } /* ============================================================ 3. SHARED PRIMITIVES — usable in either system ============================================================ */ /* Status pill — 999px radius, tinted bg, colored border, colored text. */ .exf-pill { display: inline-flex; align-items: center; gap: 6px; height: 22px; padding: 0 10px; border-radius: var(--exf-radius-pill); font-family: var(--exf-font-app-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.02em; line-height: 1; } .exf-pill--mint { background: rgba(0,228,168,0.10); border: 1px solid rgba(0,228,168,0.30); color: var(--exf-mint); } .exf-pill--blue { background: rgba(30,64,255,0.12); border: 1px solid rgba(30,64,255,0.40); color: #4b63ff; } .exf-pill--amber { background: rgba(245,166,35,0.10); border: 1px solid rgba(245,166,35,0.35); color: var(--exf-amber); } .exf-pill--coral { background: rgba(255,107,90,0.10); border: 1px solid rgba(255,107,90,0.35); color: var(--exf-coral); } .exf-pill--muted { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); color: var(--fg-2); } /* Kbd shortcut row — e.g. ⌘K */ .exf-shortcut { display: inline-flex; align-items: center; gap: 3px; font-family: var(--exf-font-app-mono); font-size: 11px; color: var(--fg-2); }