/*
 * Design tokens — ported verbatim from the SvelteKit build
 * (src/lib/styles/tokens.css). Measured computed styles, not guesses.
 * See MIGRATION.md §6 / §17 and MIGRATION_PLAN.md §6.
 *
 * These are the source of truth for the Kadence global palette / typography /
 * spacing set in Phase 2. Kept as CSS vars so scoped component overrides in
 * assets/site.css can reference them.
 */

/* Self-hosted fonts (no Google Fonts). Kadence typography families are set to
   the literal names "Red Hat Display" / "Red Hat Text" with google:false, and
   these @font-face rules provide them. Files from @fontsource-variable.
   Red Hat Display carries headings (--font-heading) and eyebrows
   (--font-accent); Red Hat Text carries body copy (--font-body). */
@font-face {
	font-family: 'Red Hat Display';
	src: url('./fonts/red-hat-display-latin-wght-normal.woff2') format('woff2-variations');
	font-weight: 300 900;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Red Hat Text';
	src: url('./fonts/red-hat-text-latin-wght-normal.woff2') format('woff2-variations');
	font-weight: 300 700;
	font-style: normal;
	font-display: swap;
}

:root {
	/* raw palette */
	--c-green: #7eb242;
	--c-green-dark: #2e4a1f;
	--c-green-11: #13612e;
	--c-green-tint: #f3f8ec;
	--c-ink: #141414;
	--c-body: #333333;
	--c-navy: #002245;
	--c-navy-band: #00145c;
	--c-navy-btn: #1f3c73;
	--c-slate: #4a5568;
	--c-gray: #6b7280;
	--c-line: #e6e9ee;
	--c-bg-alt: #f3f8ec;
	--c-mist: #f7fafc;
	--c-white: #ffffff;
	--c-blue: #1159af;
	--c-red: #b82105;
	--c-amber: #f5a524;

	/* semantic */
	--color-bg: var(--c-white);
	--color-bg-alt: var(--c-bg-alt);
	--color-bg-tint: var(--c-green-tint);
	--color-bg-hero: var(--c-green-dark);
	--color-bg-band: var(--c-navy-band);
	--color-text: var(--c-body);
	--color-heading: var(--c-ink);
	--color-text-muted: #56606f;
	--color-text-invert: #ffffff;
	/* interactive green — darkened from brand #7eb242 for WCAG AA */
	--color-primary: #4f7d2b;
	--color-primary-hover: #3c6120;
	--color-primary-contrast: #ffffff;
	--color-secondary: var(--c-navy);
	--color-link: #3c6120;
	--color-border: var(--c-line);
	--color-focus: var(--c-navy);
	--color-eyebrow: #4f7d2b;
	--color-accent-fill: var(--c-green);

	/* type */
	--font-body: 'Red Hat Text', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
	--font-heading: 'Red Hat Display', var(--font-body);
	--font-accent: 'Red Hat Display', var(--font-body);

	--fs-body: 1.1rem;
	--fs-300: 0.9rem;
	--fs-400: 1rem;
	--fs-500: 1.1rem;
	--fs-600: 1.375rem;
	--fs-eyebrow: 1.375rem;
	--fs-h3: clamp(1.3rem, 1.1rem + 0.8vw, 1.6rem);
	--fs-h2: clamp(1.9rem, 1.4rem + 2vw, 2.5rem);
	--fs-h1: clamp(2.4rem, 1.4rem + 4.4vw, 4rem);

	--lh-tight: 1.04;
	--lh-snug: 1.25;
	--lh-body: 1.6;

	/* spacing */
	--space-2xs: 0.44rem;
	--space-xs: 0.67rem;
	--space-sm: 1rem;
	--space-md: 1.5rem;
	--space-lg: 2.25rem;
	--space-xl: 3.38rem;
	--space-2xl: 5.06rem;
	--section-y: clamp(2.5rem, 1.75rem + 3.5vw, 4rem);

	/* layout */
	--container: 1250px;
	--container-narrow: 820px;
	--container-band: 1150px;
	--gutter: clamp(1.1rem, 0.5rem + 2.4vw, 2rem);

	/* radius / shadow */
	--radius-sm: 4px;
	--radius-md: 12px;
	--radius-lg: 20px;
	--radius-pill: 100px;
	--shadow-xs: 0 1px 2px rgba(16, 24, 40, 0.06);
	--shadow-sm: 0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
	--shadow-md: 0 10px 30px rgba(16, 24, 40, 0.08);
	--shadow-lg: 0 24px 60px rgba(16, 24, 40, 0.16);

	/* motion */
	--ease: cubic-bezier(0.215, 0.61, 0.355, 1);
	--dur: 200ms;

	--header-h: 70px;
}

html {
	scroll-padding-top: calc(var(--header-h) + 1.5rem);
}

/* Kadence's global typography (kadence-global-inline-css, from the h1_font/
 * h2_font/h3_font theme_mods in apply-design-system.php) sets a bare `h1 {
 * font-size: 64px }` plus two more fixed values at its own tablet/mobile
 * breakpoints — a 3-step staircase sampled from the SvelteKit source's fluid
 * clamp() curve, because Kadence's Customizer typography control has no
 * fluid/clamp input type, only discrete desktop/tablet/mobile fields.
 * Replace it with the real formula (still sitting in --fs-h1/h2/h3 above)
 * now that it's just plain CSS: same bare selector, loaded later
 * (goddy-tokens-css comes after kadence-global-inline-css in wp_head), so
 * this wins on cascade order alone — no !important, and no media queries
 * needed since clamp() already covers every width continuously. h4-h6 keep
 * Kadence's fixed per-breakpoint values: the SvelteKit source never defined
 * fluid tokens for them either (no --fs-h4/h5/h6), so there's nothing to
 * restore there. The h1_font/h2_font/h3_font theme_mods themselves are left
 * as-is — harmless, just presentationally superseded. */
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

/* Kadence parent theme's content.min.css sets `.single-content h1..h6 { margin:
   1.5em 0 .5em }` — match its specificity to override; spacing is handled
   per-component in site.css instead (e.g. .gd-eyebrow + *). Prose pages
   (privacy-policy, terms-and-conditions) have no such component and render
   plain core/heading blocks (.wp-block-heading), so restore Kadence's
   original spacing for just those. */
.single-content h1, .single-content h2, .single-content h3,
.single-content h4, .single-content h5, .single-content h6 {
	margin: 0;
}

.single-content .wp-block-heading {
	margin: 1.5em 0 .5em;
}

.single-content .wp-block-heading:first-child {
	margin-top: 0;
}

/* Kadence's advancedheading block sets `word-break: break-word`, which several
   browsers treat like break-all and split ordinary words mid-letter whenever a
   narrow column would otherwise just wrap the line (e.g. "Professional" ->
   "Profess/ional" in the tablet-width pricing cards). overflow-wrap: break-word
   keeps the same guard against a genuinely unbreakable long string without
   breaking words that would fit on the next line. */
.wp-block-kadence-advancedheading {
	word-break: normal;
	overflow-wrap: break-word;
}

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 3px solid var(--color-focus);
	outline-offset: 2px;
	border-radius: 3px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.001ms !important;
		scroll-behavior: auto !important;
	}
}