/* -------------------------------------------------------------------------
   Kinetic Run design tokens.
   This is the only file that holds brand colours, typography, spacing,
   radii and shadows. Templates and other stylesheets consume the variables;
   they never hard-code brand values.
   ------------------------------------------------------------------------- */

:root {
	/* Brand colour ramp */
	--kr-ink: #0e1116;
	--kr-ink-soft: #1c222b;
	--kr-paper: #ffffff;
	--kr-paper-muted: #c3cad4;
	--kr-surface-1: #f5f6f8;
	--kr-surface-2: #e7eaef;
	--kr-accent: #ff4d2e;
	--kr-accent-dark: #d8381b;
	--kr-on-accent: #ffffff;
	--kr-muted: #5b6570;
	--kr-line: #dce0e6;
	--kr-line-strong: #b9c0ca;

	/* Semantic */
	--kr-success: #1f7a4d;
	--kr-success-bg: #e4f4ea;
	--kr-danger: #b3261e;
	--kr-danger-bg: #fbe9e7;

	/* Typography */
	--kr-font-sans: "Inter", "Segoe UI", "Helvetica Neue", Arial, sans-serif;
	--kr-font-display: var(--kr-font-sans);
	--kr-text-xs: 12px;
	--kr-text-sm: 14px;
	--kr-text-base: 16px;
	--kr-text-md: 18px;
	--kr-text-lg: clamp(22px, 2.4vw, 28px);
	--kr-text-display: clamp(34px, 5.2vw, 62px);

	/* Spacing */
	--kr-space-2xs: 4px;
	--kr-space-xs: 8px;
	--kr-space-sm: 12px;
	--kr-space-md: 20px;
	--kr-space-lg: 32px;
	--kr-space-xl: 48px;

	/* Radii */
	--kr-radius-sm: 4px;
	--kr-radius-md: 10px;
	--kr-radius-lg: 18px;

	/* Elevation */
	--kr-shadow-sm: 0 1px 2px rgba(14, 17, 22, 0.06);
	--kr-shadow-md: 0 8px 24px rgba(14, 17, 22, 0.09);
	--kr-shadow-hover: 0 14px 34px rgba(14, 17, 22, 0.14);
}

/* Dark surface used by the hero and the footer band. */
.kr-hero,
.kr-dark {
	background-color: var(--kr-ink);
	color: var(--kr-paper);
}