/* ============================================================================ KernForms — main.css CSS foundation for the public marketing website (kernforms.co.uk). Dark only, hard-coded — the site does NOT follow the visitor's OS/browser setting. No prefers-color-scheme. Colour & type governed by docs/kernforms-brand-tokens.md (single source of truth). Foundation only — no section-specific styles here. ============================================================================ */ /* --- Fonts ---------------------------------------------------------------- Archivo (display) + Inter (body) are loaded via tags in the HTML (faster than an @import, which blocks until the CSS is fetched). */ /* --- Design tokens (dark values only) ------------------------------------- */ :root { --kf-bg: #0B0B0A; --kf-surface: #161512; --kf-elevated: #211F1B; --kf-border: rgba(255, 255, 255, 0.10); --kf-text: #FAF9F5; --kf-text-2: rgba(250, 249, 245, 0.65); --kf-text-3: rgba(250, 249, 245, 0.40); --kf-green: #16a34a; /* accent + success — constant across themes */ --kf-red: #ef4444; /* error — constant across themes */ --kf-amber: #d97706; /* warning — constant across themes */ --kf-radius: 2px; --kf-font-display: 'Archivo', system-ui, sans-serif; --kf-font-body: 'Inter', system-ui, sans-serif; color-scheme: dark; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* --- Base ----------------------------------------------------------------- */ html { background: var(--kf-bg); } body { background: var(--kf-bg); font-family: var(--kf-font-body); color: var(--kf-text); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* --- Typography defaults -------------------------------------------------- */ h1, h2, h3, h4 { font-family: var(--kf-font-display); color: var(--kf-text); } p { font-family: var(--kf-font-body); color: var(--kf-text); } a { color: var(--kf-green); } /* --- Layout utility ------------------------------------------------------- */ .wrap { max-width: 1080px; margin: 0 auto; padding-left: 32px; padding-right: 32px; } @media (max-width: 760px) { .wrap { padding-left: 22px; padding-right: 22px; } }