/* Design tokens: colors, typography, spacing, radii, containers.
   Single source of truth for the classic theme visual language. */
:root {
	--k-shamrock: #27c499;
	--k-yellow-green: #c5df91;
	--k-grassy-green: #7f9969;
	--k-earthy-green: #6b7d5c;
	--k-teal: #034654;
	--k-casper: #a1b7c4;

	--k-turq: #72bcff;

	--k-blue: var(--k-turq);
	--k-blue-bold: #256cba;
	--k-blue-light: #5599ff;
	--k-blue-very-light: #7dddff;

	--k-tidal: #e1f7a2;

	--k-off-white: #f1f1f1;
	--k-gray: #eaeaea;
	--k-gray-light: #f9fcf5;

	--k-font-heading: "dt", sans-serif;
	--k-font-body: "fdsl", serif;
	--k-font-accent: var(--k-font-body);

	--k-text-sm: 0.875rem;
	--k-text-sm2: 0.95rem;
	--k-text-base: 1rem;
	--k-text-lg: 1.125rem;
	--k-text-xl: 1.25rem;
	--k-text-2xl: 1.5rem;
	--k-text-3xl: 1.75rem;
	--k-text-hero: 2.5rem;

	/* Line-height (unitless multiplier) + letter-spacing (em, so tracking
	   rides the current font-size). Role-based: display = hero/3xl,
	   heading = 2xl/xl/lg, body = p/prose, compact = nav/buttons/stamps.
	   Roles ramp per breakpoint below; big type tightens, small type opens. 
	   
		- display goes tighter as it grows — big type needs optical correction so words read as a unit, not spaced characters
		- heading stays moderate, loosens slightly at large sizes for legibility on 27" zone
		- body opens up on big screens — more breathing room per line when font-size is already 1.5-1.7rem
		- ui widens with size — uppercase nav/button labels need more tracking at large scales to avoid crammed look

  */

	--k-lh-display: 1.1;
	--k-lh-heading: 1.25;
	--k-lh-body: 1.5;
	--k-lh-compact: 1.3;

	--k-track-display: 0;
	--k-track-heading: 0.01em;
	--k-track-body: 0;
	--k-track-ui: 0.04em;

	--k-space-sm: 1rem;
	--k-space-md: 1.5rem;
	--k-space-lg: 2.5rem;
	--k-space-xl: 4rem;
	--k-space-2xl: 6rem;

	--k-radius-sm: 8px;
	--k-radius-md: 12px;
	--k-radius-pill: 100px;

	--k-container: 1200px;
	--k-container-narrow: 900px;
	--k-white: var(--k-off-white);

	--k-primary-text-color: var(--k-blue-bold);
	--k-secondary-text-color: var(--k-gray-light);

	--k-card-bg: #ffffff;

	/* Motion: one duration + one easing for every UI transition on the site.
	   Fast + crisp on purpose -- hovers, toggles, accordions, crossfades all
	   share the same rhythm so nothing feels sluggish. Exceptional cases
	   (page-load hero leaf pulse, long media crossfades) live in GSAP or the
	   specific partial, never duplicate this ramp. */
	--k-dur: 225ms;
	--k-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Type scale tiers sm/md/lg/xl. Each block redeclares whichever tokens
   change at that breakpoint. Roles step together so cross-role rhythm
   stays consistent per tier. Large xl jump is intentional for the 27"+
   aesthetic the operator signed off on. */
@media (min-width: 640px) {
	:root {
		--k-text-2xl: 1.75rem;
		--k-text-3xl: 2.25rem;
		--k-text-hero: 3.5rem;

		--k-lh-heading: 1.2;
		--k-lh-body: 1.55;

		--k-track-display: -0.005em;
		--k-track-heading: 0.005em;
	}
}

@media (min-width: 992px) {
	:root {
		--k-text-sm: 1rem;
		--k-text-base: 1.125rem;
		--k-text-lg: 1.25rem;
		--k-text-xl: 1.5rem;
		--k-text-2xl: 2.125rem;
		--k-text-3xl: 2.75rem;
		--k-text-hero: 4.25rem;

		--k-lh-display: 1.05;
		--k-lh-heading: 1.25;
		--k-lh-body: 1.6;
		--k-lh-compact: 1.35;

		--k-track-display: -0.01em;
		--k-track-heading: 0;
		--k-track-ui: 0.05em;
	}
}

@media (min-width: 1131px) {
	:root {
		--k-text-lg: 1.375rem;
		--k-text-xl: 1.625rem;
		--k-text-2xl: 2.375rem;
		--k-text-3xl: 3.25rem;
		--k-text-hero: 5rem;

		--k-lh-display: 1;
		--k-lh-body: 1.65;

		--k-track-display: -0.015em;
		--k-track-ui: 0.06em;
	}
}

@media (min-width: 1600px) {
	:root {
		--k-text-sm: 1.25rem;
		--k-text-base: 1.5rem;
		--k-text-lg: 1.75rem;
		--k-text-xl: 2rem;
		--k-text-2xl: 3.25rem;
		--k-text-3xl: 5rem;
		--k-text-hero: 8rem;

		--k-lh-body: 1.7;
		--k-lh-compact: 1.4;

		--k-track-display: -0.02em;
		--k-track-heading: -0.005em;
		--k-track-ui: 0.07em;
	}
}

@font-face {
	font-family: "dt";
	font-weight: 275;
	font-display: swap;
	src: url("../fonts/dt/d-t--Web-Extralight.woff2") format("woff2");
}

@font-face {
	font-family: "dt";
	font-weight: 300;
	font-display: swap;
	src: url("../fonts/dt/d-t--Web-Light.woff2") format("woff2");
}

@font-face {
	font-family: "dt";
	font-weight: 400;
	font-display: swap;
	src: url("../fonts/dt/d-t--Web-Regular.woff2") format("woff2");
}

@font-face {
	font-family: "dt";
	font-weight: 500;
	font-display: swap;
	src: url("../fonts/dt/d-t--Web-Medium.woff2") format("woff2");
}

@font-face {
	font-family: "dt";
	font-weight: 600;
	font-display: swap;
	src: url("../fonts/dt/d-t--Web-Semibold.woff2") format("woff2");
}

@font-face {
	font-family: "dt";
	font-weight: 700;
	font-display: swap;
	src: url("../fonts/dt/d-t--Web-Bold.woff2") format("woff2");
}

@font-face {
	font-family: "dt";
	font-weight: 800;
	font-display: swap;
	src: url("../fonts/dt/d-t--Web-Extrabold.woff2") format("woff2");
}

@font-face {
	font-family: "fdsl";
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
	src: url("../fonts/fd/fdslVariable.woff2") format("woff2");
}

@font-face {
	font-family: "fdsl";
	font-weight: 100 900;
	font-style: italic;
	font-display: swap;
	src: url("../fonts/fd/fdslVariableItalic.woff2") format("woff2");
}

/* Tabular lining figures: uniform-width numerals aligned to cap height.
   Use on phone numbers, prices, table cells -- anywhere digits must align.
   Both properties for max browser/font compat -- feature-settings is the
   direct OpenType toggle, variant-numeric is the higher-level CSS API. */
.kr-lining-nums {
	font-feature-settings:
		"lnum" 1,
		"tnum" 1;
	font-variant-numeric: lining-nums tabular-nums;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		/* biome-ignore lint/complexity/noImportantStyles: a11y override must win over all specificity */
		transition-duration: 0.01ms !important;
		/* biome-ignore lint/complexity/noImportantStyles: a11y override must win over all specificity */
		animation-duration: 0.01ms !important;
	}
}