/* =========================================================================
KINGS OF STONE — Foundations
Colors, typography, spacing, semantic tokens.
Ported verbatim from design/kos-hp/project/colors_and_type.css.
========================================================================= */
/* NOTE: Google Fonts is now loaded via in each
HTML — that's one round-trip faster than @import-from-CSS,
because the browser doesn't have to parse this file before discovering
the font CSS URL. The uses preconnect hints in the HTML to
start the TLS handshake to fonts.googleapis.com / fonts.gstatic.com
even earlier. */
:root {
/* ---- Color palette (brand) ------------------------------------------ */
--kos-coal: #111111;
--kos-cobalt: #165487;
--kos-brick: #C23024;
/* Lighter brand variants for use on dark backgrounds — both pass WCAG AA
(>= 4.5:1 contrast) against --kos-coal. Use only in dark contexts. */
--kos-cobalt-on-dark: #4a90d3; /* 5.67:1 on coal */
--kos-brick-on-dark: #e15a4e; /* 5.33:1 on coal */
--kos-bone: #F2F2F2;
--kos-concrete: #C9C9C9;
--kos-paper: #FAF7F2;
--kos-ash: #6B6B6B;
--kos-smoke: #1A1A1A;
--kos-white: #FFFFFF;
/* ---- Semantic color tokens ------------------------------------------ */
--bg: var(--kos-bone);
--bg-elevated: var(--kos-white);
--bg-inverted: var(--kos-coal);
--bg-accent: var(--kos-cobalt);
--bg-hot: var(--kos-brick);
--fg: var(--kos-coal);
--fg-muted: var(--kos-ash);
--fg-inverted: var(--kos-bone);
--fg-on-accent: var(--kos-bone);
--fg-on-hot: var(--kos-bone);
--fg-brand: var(--kos-brick);
--border: var(--kos-coal);
--border-subtle: var(--kos-concrete);
--divider: var(--kos-concrete);
/* ---- Type families --------------------------------------------------- */
--font-display: 'Anton', 'Oswald', 'Impact', 'Helvetica Neue Condensed Bold', sans-serif;
--font-body: 'DM Sans', 'Inter', 'Helvetica Neue', Arial, sans-serif;
--font-mono: 'JetBrains Mono', 'IBM Plex Mono', ui-monospace, monospace;
/* ---- Type scale ----------------------------------------------------- */
--fs-display: clamp(72px, 9vw, 140px);
--fs-h1: clamp(56px, 6vw, 96px);
--fs-h2: clamp(32px, 3.2vw, 48px);
--fs-h3: clamp(22px, 2vw, 28px);
--fs-h4: 20px;
--fs-body: 16px;
--fs-small: 13px;
--fs-micro: 11px;
--lh-display: 0.92;
--lh-heading: 1.00;
--lh-body: 1.55;
--tracking-tight: -0.01em;
--tracking-normal: 0;
--tracking-label: 0.12em;
--tracking-micro: 0.18em;
/* ---- Spacing --------------------------------------------------------- */
--s-0: 0;
--s-1: 4px;
--s-2: 8px;
--s-3: 12px;
--s-4: 16px;
--s-5: 24px;
--s-6: 32px;
--s-7: 48px;
--s-8: 64px;
--s-9: 96px;
--s-10: 128px;
/* ---- Radii ----------------------------------------------------------- */
--radius-none: 0;
--radius-xs: 2px;
--radius-sm: 4px;
--radius-pill: 999px;
/* ---- Borders --------------------------------------------------------- */
--bw-hairline: 1px;
--bw-strong: 2px;
--bw-heavy: 3px;
/* ---- Shadows --------------------------------------------------------- */
--shadow-card: 0 2px 0 0 var(--kos-coal);
--shadow-lift: 0 8px 24px -8px rgba(17, 17, 17, 0.22);
--shadow-press: inset 0 2px 0 0 rgba(0,0,0,0.15);
/* ---- Motion ---------------------------------------------------------- */
--ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
--dur-fast: 120ms;
--dur-base: 220ms;
--dur-slow: 420ms;
}