/*
 * Kelley + Co. design tokens, from the Kelley + Co. design system (Claude Design handoff, Oct 2026).
 * Monochrome by design: introduce a brand color by changing --kc-accent only.
 */

@font-face { font-family: "Jost"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/jost-400.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/jost-500.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/jost-600.woff2") format("woff2"); }
@font-face { font-family: "Jost"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/jost-700.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/hanken-grotesk-400.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/hanken-grotesk-500.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/hanken-grotesk-600.woff2") format("woff2"); }
@font-face { font-family: "Hanken Grotesk"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/hanken-grotesk-700.woff2") format("woff2"); }

:root {
	/* Ink ramp on white */
	--kc-ink: #141414;
	--kc-ink-800: #2b2b2b;
	--kc-ink-700: #404040;
	--kc-ink-600: #555555;
	--kc-ink-500: #6e6e6e;
	--kc-ink-400: #909090;
	--kc-ink-300: #b5b5b5;
	--kc-ink-200: #d6d6d6;
	--kc-ink-100: #e8e8e8;
	--kc-ink-050: #f4f4f4;
	--kc-paper: #ffffff;
	--kc-paper-2: #f7f7f7;
	--kc-accent: var(--kc-ink);

	--kc-rule: rgba(20, 20, 20, 0.14);
	--kc-rule-on-ink: rgba(255, 255, 255, 0.24);

	/* Type */
	--kc-font-display: "Jost", "Century Gothic", "Futura", ui-sans-serif, system-ui, sans-serif;
	--kc-font-body: "Hanken Grotesk", ui-sans-serif, system-ui, "Helvetica Neue", Arial, sans-serif;
	--kc-tracking-wordmark: 0.2em;
	--kc-tracking-label: 0.2em;
	--kc-tracking-ui: 0.14em;

	/* Layout */
	--kc-container: 1240px;
	--kc-gutter: clamp(20px, 3.5vw, 44px);
	--kc-section: clamp(64px, 8vw, 104px);
	--kc-measure: 36em;
	--kc-header-h: 61px;

	/* Motion */
	--kc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--kc-dur: 240ms;
	--kc-radius: 2px;
}