/**
 * Kyle Painting Pros — design tokens.
 *
 * Source of truth for color, type, space, and shape. Values match the
 * Figma variable collections (Primitives, Color, Spacing, radii, text styles).
 * Component styles must use these variables. Mirror hex values in theme.json.
 *
 * Fraunces and Inter are self-hosted latin WOFF2 subsets. font-display is
 * swap, as specified. Fallback faces use size-adjust so the swap moves less.
 */

@font-face {
	font-family: "Fraunces";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/fraunces-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/inter-latin-400.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/inter-latin-500.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/inter-latin-600.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/inter-latin-700.woff2") format("woff2");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
	font-family: "Inter Fallback";
	src: local("Arial");
	size-adjust: 107%;
	ascent-override: 90%;
	descent-override: 22%;
	line-gap-override: 0%;
}

@font-face {
	font-family: "Fraunces Fallback";
	src: local("Georgia");
	size-adjust: 98%;
	ascent-override: 88%;
	descent-override: 22%;
	line-gap-override: 0%;
}

:root {
	/* Primitives */
	--kpp-navy-900: #152842;
	--kpp-navy-700: #1f3a5f;
	--kpp-navy-100: #e3e9f1;
	--kpp-terracotta-600: #c9652c;
	--kpp-terracotta-500: #e07a3f;
	--kpp-terracotta-100: #fbe7da;
	--kpp-sage-500: #6fa8a0;
	--kpp-sage-100: #e2efed;
	--kpp-cream-50: #faf7f2;
	--kpp-cream-200: #efe8dc;
	--kpp-charcoal-900: #22262b;
	--kpp-charcoal-600: #5a6068;
	--kpp-white: #ffffff;

	/* Semantic aliases */
	--kpp-bg-page: var(--kpp-cream-50);
	--kpp-bg-surface: var(--kpp-white);
	--kpp-bg-subtle: var(--kpp-cream-200);
	--kpp-bg-brand: var(--kpp-navy-700);
	--kpp-bg-brand-strong: var(--kpp-navy-900);
	--kpp-bg-brand-soft: var(--kpp-navy-100);
	--kpp-bg-cta: var(--kpp-terracotta-500);
	--kpp-bg-cta-hover: var(--kpp-terracotta-600);
	--kpp-bg-cta-soft: var(--kpp-terracotta-100);
	--kpp-bg-accent: var(--kpp-sage-500);
	--kpp-bg-accent-soft: var(--kpp-sage-100);
	--kpp-text-primary: var(--kpp-charcoal-900);
	--kpp-text-secondary: var(--kpp-charcoal-600);
	--kpp-text-brand: var(--kpp-navy-700);
	--kpp-text-cta: var(--kpp-terracotta-600);
	/* Darkened so 13px eyebrows and 16px button labels clear WCAG AA.
	   The spec swatches stay available as --kpp-terracotta-500/600. */
	--kpp-text-cta-strong: #9a4518;
	--kpp-bg-cta-strong: #b4531a;
	--kpp-bg-cta-strong-hover: #8e3f16;
	--kpp-text-inverse: var(--kpp-white);
	--kpp-border-default: var(--kpp-cream-200);
	--kpp-border-brand: var(--kpp-navy-700);

	/* Legacy names used across component CSS. They now point at the Figma palette. */
	--kpp-color-canvas: var(--kpp-bg-page);
	--kpp-color-paper: var(--kpp-bg-surface);
	--kpp-color-ink: var(--kpp-text-primary);
	--kpp-color-ink-soft: var(--kpp-text-secondary);
	--kpp-color-muted: var(--kpp-text-secondary);
	--kpp-color-line: var(--kpp-border-default);
	--kpp-color-linen: var(--kpp-bg-subtle);
	--kpp-color-sap: var(--kpp-bg-brand);
	--kpp-color-sap-deep: var(--kpp-bg-brand-strong);
	--kpp-color-clay: var(--kpp-text-cta);
	--kpp-color-ochre: var(--kpp-bg-cta);
	--kpp-color-ochre-chip: var(--kpp-bg-cta);
	--kpp-color-ochre-soft: var(--kpp-bg-cta-soft);
	--kpp-color-slate: var(--kpp-bg-accent);
	--kpp-color-focus: var(--kpp-navy-700);
	--kpp-color-on-sap: var(--kpp-text-inverse);
	--kpp-color-on-ink: var(--kpp-text-inverse);

	--kpp-font-serif: "Fraunces", "Fraunces Fallback", "Iowan Old Style", Palatino, Georgia, serif;
	--kpp-font-sans: "Inter", "Inter Fallback", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--kpp-font-mono: ui-monospace, "SFMono-Regular", Menlo, Consolas, "Liberation Mono", monospace;

	--kpp-weight-regular: 400;
	--kpp-weight-medium: 500;
	--kpp-weight-semibold: 600;
	--kpp-weight-bold: 700;

	/* Text styles. Display and headings scale down on small screens; the max is the Figma size. */
	--kpp-text-display: clamp(2.5rem, 5vw, 4rem); /* Display/XL 64 / 105% */
	--kpp-text-3xl: clamp(2.125rem, 4vw, 3rem); /* H1 48 / 110% */
	--kpp-text-2xl: clamp(1.75rem, 2.6vw, 2.25rem); /* H2 36 / 115% */
	--kpp-text-h3: clamp(1.375rem, 2vw, 1.625rem); /* H3 26 / 125% */
	--kpp-text-xl: 1.25rem; /* H4 / card title 20 */
	--kpp-text-lg: 1.125rem; /* Body large 18 */
	--kpp-text-md: 1rem; /* Body 16 */
	--kpp-text-sm: 0.875rem; /* Body small 14 */
	--kpp-text-xs: 0.8125rem; /* Eyebrow 13 */
	--kpp-text-data: 0.9375rem; /* Data/Table 15 */
	--kpp-text-nav: 0.9375rem; /* Nav links 15 */
	--kpp-text-wordmark: 1.3125rem; /* Fraunces 21 */

	--kpp-leading-display: 1.05;
	--kpp-leading-h1: 1.1;
	--kpp-leading-heading: 1.15;
	--kpp-leading-h3: 1.25;
	--kpp-leading-h4: 1.3;
	--kpp-leading-body: 1.6;
	--kpp-leading-small: 1.5;
	--kpp-leading-snug: 1.3;
	--kpp-leading-button: 1.2;
	--kpp-leading-data: 1.4;
	--kpp-tracking-kicker: 0.08em;

	/* Spacing scale: 4, 8, 12, 16, 24, 32, 48, 64, 96 */
	--kpp-space-2xs: 0.25rem;
	--kpp-space-xs: 0.5rem;
	--kpp-space-sm: 0.75rem;
	--kpp-space-md: 1rem;
	--kpp-space-lg: 1.5rem;
	--kpp-space-xl: 2rem;
	--kpp-space-2xl: 3rem;
	--kpp-space-3xl: 4rem;
	--kpp-space-4xl: 6rem;
	--kpp-space-1: var(--kpp-space-2xs);
	--kpp-space-2: var(--kpp-space-xs);
	--kpp-space-3: var(--kpp-space-sm);
	--kpp-space-4: var(--kpp-space-md);
	--kpp-space-5: var(--kpp-space-lg);
	--kpp-space-6: var(--kpp-space-xl);
	--kpp-space-7: var(--kpp-space-2xl);
	--kpp-space-8: var(--kpp-space-3xl);
	--kpp-space-9: var(--kpp-space-4xl);

	--kpp-gutter: clamp(1.25rem, 4vw, 5rem);
	--kpp-wrap: 80rem;
	--kpp-measure: 40rem;
	--kpp-header-height: 6.25rem;

	--kpp-radius-sm: 6px;
	--kpp-radius-md: 12px;
	--kpp-radius: 12px;
	--kpp-radius-lg: 20px;
	--kpp-radius-xl: 24px;
	--kpp-radius-full: 999px;
	--kpp-border: 1px solid var(--kpp-border-default);
	--kpp-shadow-card: 0 8px 24px rgba(31, 41, 56, 0.08);
	--kpp-card-padding: 1.25rem;
	--kpp-panel-padding: clamp(1.25rem, 2vw, 1.75rem);
	--kpp-media-card: 16 / 10;
	--kpp-media-feature: 16 / 9;
	--kpp-media-hero: 4 / 3;
}