/* ========================================================================= AI Fitters · colors_and_type.css Source of truth for design tokens. Mirrors the brand-guidelines.html uploaded by the client. Import once at the top of any page: Fonts: Manrope (sans) + JetBrains Mono (mono) — variable TTFs vendored locally under /fonts/. Both are licensed under the SIL Open Font License; see fonts/*-OFL.txt. ========================================================================= */ @font-face { font-family: "Manrope"; src: url("fonts/Manrope-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/Manrope-VariableFont_wght.ttf") format("truetype"); font-weight: 200 800; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype-variations"), url("fonts/JetBrainsMono-VariableFont_wght.ttf") format("truetype"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { /* ---------- BRAND CORE ---------- */ --blue-50: #F1F7FD; --blue-100: #E8F1FB; --blue-200: #B8D4F3; --blue-400: #4F8FE0; --blue: #1E6FD9; /* brand blue · the canonical stop */ --blue-700: #185FA5; --blue-900: #0C2E50; --ink: #1A1A1A; /* body text, primary buttons. NEVER #000 */ --ink-soft: #404040; --muted: #707070; --muted-2: #A0A0A0; --line: #E5E0D5; --line-2: #EFEAE0; --sand: #F4EFE6; /* warm section background */ --sand-warm: #EBE3D3; /* hover state for sand cards */ --sand-deep: #D9CFB8; --white: #FFFFFF; --orange: #DF6F56; /* accent — reserved for the highest-conviction CTA only */ --orange-700: #E5660A; /* ---------- SEMANTIC ---------- */ --success: #2D7A2D; --success-bg: #E5F5E5; --warning: #B97A0A; --warning-bg: #FBF1DD; --danger: #C42F2F; --danger-bg: #FBE6E6; --info: #1E6FD9; --info-bg: #E8F1FB; /* ---------- ROLE ALIASES (fg/bg/border) ---------- */ --fg-1: var(--ink); --fg-2: var(--ink-soft); --fg-3: var(--muted); --fg-4: var(--muted-2); --fg-inv: var(--white); --bg-1: var(--white); /* page */ --bg-2: var(--sand); /* warm break section */ --bg-3: var(--sand-warm); /* sand-card hover */ --bg-dark: var(--blue-900); /* featured/dark surface — blue-900, never ink (per client override) */ --border-1: var(--line); --border-2: var(--line-2); --link: var(--blue); --link-hover: var(--blue-700); --focus-ring: 0 0 0 3px var(--blue-100); /* ---------- TYPOGRAPHY ---------- */ --font-sans: "Manrope", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; /* sizes (px) */ --fs-display-xl: 72px; --fs-display: 60px; --fs-h1: 48px; --fs-h2: 36px; --fs-h3: 28px; --fs-h4: 22px; --fs-h5: 18px; --fs-body-lg: 19px; --fs-body: 17px; --fs-body-sm: 15px; --fs-caption: 13px; --fs-micro: 11px; /* line-heights */ --lh-display-xl: 1.0; --lh-display: 1.05; --lh-h1: 1.1; --lh-h2: 1.15; --lh-h3: 1.2; --lh-h4: 1.3; --lh-h5: 1.4; --lh-body: 1.55; /* tracking */ --tr-display-xl: -0.04em; --tr-display: -0.035em; --tr-h1: -0.03em; --tr-h2: -0.025em; --tr-h3: -0.02em; --tr-h4: -0.01em; --tr-micro: 0.08em; /* ---------- SPACING (8pt 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; --s-24: 96px; --s-28: 112px; /* desktop section padding default */ --s-32: 128px; /* hero section padding */ /* containers */ --w-narrow: 720px; --w-default: 1200px; --w-wide: 1400px; /* breakpoints (reference values) */ --bp-sm: 640px; --bp-md: 768px; --bp-lg: 1024px; --bp-xl: 1280px; --bp-2xl: 1536px; /* ---------- RADIUS ---------- */ --r-sm: 6px; /* hairline borders, table cells */ --r-md: 10px; /* buttons, inputs, dropdowns */ --r-lg: 16px; /* surface cards */ --r-xl: 20px; /* hero / service tool cards */ --r-2xl: 24px; /* large illustration containers */ --r-full: 9999px; /* ---------- SHADOWS ---------- */ --sh-xs: 0 1px 2px rgba(0,0,0,0.04); --sh-sm: 0 2px 6px rgba(0,0,0,0.04); --sh-md: 0 8px 24px rgba(0,0,0,0.06), 0 2px 6px rgba(0,0,0,0.04); --sh-lg: 0 12px 32px rgba(0,0,0,0.08); --sh-xl: 0 20px 48px rgba(0,0,0,0.12); /* ---------- TRANSITION ---------- */ --t-fast: 100ms; --t-normal: 150ms; --t-slow: 200ms; --t-ease: cubic-bezier(.4,0,.2,1); } /* ========================================================================= ELEMENT DEFAULTS — opt in with class="af-prose" on a wrapper, or use the af-* semantic classes individually. ========================================================================= */ html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-sans); color: var(--fg-1); background: var(--bg-1); font-size: var(--fs-body); line-height: var(--lh-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- semantic type classes (use these instead of styling raw h1/h2) ---- */ .af-display-xl { font-size: var(--fs-display-xl); line-height: var(--lh-display-xl); letter-spacing: var(--tr-display-xl); font-weight: 800; } .af-display { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tr-display); font-weight: 800; } .af-h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--tr-h1); font-weight: 800; } .af-h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--tr-h2); font-weight: 800; } .af-h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); letter-spacing: var(--tr-h3); font-weight: 700; } .af-h4 { font-size: var(--fs-h4); line-height: var(--lh-h4); letter-spacing: var(--tr-h4); font-weight: 700; } .af-h5 { font-size: var(--fs-h5); line-height: var(--lh-h5); font-weight: 600; } .af-body-lg { font-size: var(--fs-body-lg); line-height: var(--lh-body); } .af-body { font-size: var(--fs-body); line-height: var(--lh-body); } .af-body-sm { font-size: var(--fs-body-sm); line-height: var(--lh-body); } .af-caption { font-size: var(--fs-caption); line-height: 1.5; font-weight: 500; } .af-micro { font-size: var(--fs-micro); line-height: 1.4; font-weight: 700; letter-spacing: var(--tr-micro); text-transform: uppercase; color: var(--muted); } .af-mono { font-family: var(--font-mono); } .af-prose p + p { margin-top: var(--s-3); } /* responsive type reductions below md */ @media (max-width: 767px) { .af-display-xl { font-size: 48px; } .af-display { font-size: 40px; } .af-h1 { font-size: 36px; } .af-h2 { font-size: 28px; } .af-h3 { font-size: 24px; } } /* ---- focus ring (apply via :focus-visible on interactive elements) ---- */ .af-focus:focus-visible, .af-btn:focus-visible, .af-input:focus-visible, .af-link:focus-visible { outline: none; box-shadow: var(--focus-ring); }