/* ========================================================================== iAmAI design tokens — single source of truth for color, radius, type, and the shared components. Consolidates the per-page duplicates surfaced by the 2026-07-11 design audit (5 cyans, 4 eyebrow classes, 3 button classes, dense radius scale). Values match the DOMINANT existing usage → near-zero visual change when pages are refactored onto these. ========================================================================== */ /* Fira Code (brand-DNA mono, --font-mono) is loaded per-page via a in — NOT @import here — so it fetches in parallel on the existing fonts.gstatic preconnect and never serializes behind this stylesheet. Always with display=swap + weight 500 only (it's non-LCP: eyebrows only). */ :root { /* ── Brand cyan ── */ --cyan: #06B6D4; /* primary accent, buttons, links */ --cyan-bright: #22D3EE; /* gradients, highlights */ --cyan-dark: #0891B2; /* button hover — also replaces the near-dup #0894AD */ --cyan-deep: #0E7490; /* dark sub-headings */ /* ── Ink / slate scale ── */ --ink: #0F172A; --slate-700: #334155; --slate-600: #475569; --muted: #5A6273; /* secondary body text */ --slate-500: #64748B; --slate-400: #94A3B8; --slate-300: #CBD5E1; /* ── Semantic ── */ --green: #10B981; --green-dark: #047857; /* replaces the stray #16A34A */ --red: #DC2626; --amber: #F59E0B; --amber-bg: #FEF3C7; /* ── Surfaces / borders ── */ --bg: #F7FAFC; /* page background */ --white: #fff; /* unify #ffffff → #fff */ --surface: #F8FAFC; --surface-2: #F1F5F9; --line: #E2E8F0; --line-soft: #EDEFF2; --tint-cyan: #ECFEFF; /* ── Radius ── */ --r-sm: 10px; --r-md: 16px; --r-lg: 20px; --r-pill: 999px; /* ── Type ── */ --font-sans: 'Heebo', system-ui, -apple-system, 'Segoe UI', sans-serif; --font-mono: 'Fira Code', ui-monospace, 'SFMono-Regular', monospace; } /* ========================================================================== Shared components — the ONE definition each. Per-page copies map to these. ========================================================================== */ /* Primary button (cyan, white, 700, same hover site-wide) */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: var(--cyan); color: var(--white); font-family: var(--font-sans); font-weight: 700; font-size: 15px; line-height: 1; border: none; border-radius: var(--r-md); padding: 14px 26px; cursor: pointer; text-decoration: none; transition: background .15s, transform .15s, box-shadow .15s; } .btn:hover { background: var(--cyan-dark); } .btn:active { transform: translateY(1px); } /* Ghost / secondary button */ .btn--ghost { background: var(--white); color: var(--ink); border: 1.5px solid var(--slate-300); } .btn--ghost:hover { border-color: var(--cyan); color: var(--cyan); background: var(--white); } /* Pill variant (for the big CTAs that were border-radius:999px) */ .btn--pill { border-radius: var(--r-pill); } /* Section eyebrow — the "// LABEL" mono kicker, one class for all sections */ .eyebrow { display: inline-block; font-family: var(--font-mono); font-size: 12px; font-weight: 500; letter-spacing: 0.12em; color: var(--cyan); text-transform: uppercase; } /* Card — white surface, soft border + shadow */ .card { background: var(--white); border: 1px solid var(--line-soft); border-radius: var(--r-lg); box-shadow: 0 12px 40px rgba(15, 23, 42, 0.06); }