/**
 * Kyle Roofing Pros tokens from the Figma brand kit (file sYWhu89nlaCdqgkeyLv4LH).
 */

:root {
	--krp-brand-primary: #23313b;
	--krp-brand-primary-strong: #16212a;
	--krp-brand-secondary: #b8642a;
	--krp-brand-secondary-strong: #8f4a1c;
	--krp-brand-secondary-tint: #f6e7da;
	--krp-brand-accent: #2f6a99;
	--krp-brand-accent-tint: #e3eef6;

	--krp-bg-page: #f7f6f3;
	--krp-bg-muted: #eeece7;
	--krp-bg-surface: #ffffff;
	--krp-bg-inverse: #16212a;

	--krp-border-default: #d3cfc6;

	--krp-text-primary: #1b1a17;
	--krp-text-secondary: #4a4740;
	--krp-text-muted: #8a857b;
	--krp-text-inverse: #ffffff;

	--krp-status-success: #2f7d4f;
	--krp-status-warning: #b7791f;
	--krp-status-error: #b23b3b;
	--krp-status-info: #2b6cb0;

	--krp-space-2xs: 4px;
	--krp-space-xs: 8px;
	--krp-space-sm: 12px;
	--krp-space-md: 16px;
	--krp-space-lg: 24px;
	--krp-space-xl: 32px;
	--krp-space-2xl: 48px;
	--krp-space-3xl: 64px;
	--krp-space-4xl: 96px;

	--krp-radius-none: 0;
	--krp-radius-sm: 4px;
	--krp-radius-md: 8px;
	--krp-radius-lg: 16px;
	--krp-radius-full: 999px;

	--krp-shadow-sm: 0 1px 2px rgba(22, 33, 42, 0.08);
	--krp-shadow-md: 0 4px 12px rgba(22, 33, 42, 0.1);
	--krp-shadow-lg: 0 12px 32px rgba(22, 33, 42, 0.14);

	--krp-font-display: Fraunces, Georgia, "Times New Roman", serif;
	--krp-font-body: Inter, "Segoe UI", sans-serif;
	--krp-content: 1312px;
	--krp-measure: 720px;
}