/**
 * Design Tokens — Kds
 *
 * Single source of truth for all design decisions not covered by theme.json.
 * Colors and font sizes live in theme.json (they power the block editor palette).
 * Everything else lives here.
 *
 * Usage: var(--kd-*)
 * Prefix: --kd-* (org-level design system, shared across KD clients) to avoid
 * collisions with WP's own custom properties.
 */

:root {
	/* ── Color roles (values live in the theme.json palette) ─────────────────── */

	--kd-color-base: var(
		--wp--preset--color--base
	); /* page background (white) */
	--kd-color-contrast: var(
		--wp--preset--color--contrast
	); /* headline ink #092D3A */
	--kd-color-body: var(--wp--preset--color--body-ink); /* body text #343434 */
	--kd-color-primary: var(--wp--preset--color--primary); /* primary anchor */
	--kd-color-secondary: var(
		--wp--preset--color--secondary
	); /* indigo hover #252265 */
	--kd-color-accent: var(
		--wp--preset--color--accent
	); /* social pink #E770A8 */
	--kd-color-neutral-100: var(--wp--preset--color--neutral-100);
	--kd-color-neutral-300: var(--wp--preset--color--neutral-300);
	--kd-color-neutral-500: var(--wp--preset--color--neutral-500);
	--kd-color-neutral-700: var(--wp--preset--color--neutral-700);
	--kd-color-neutral-900: var(--wp--preset--color--neutral-900);
	--kd-color-banner-bg: var(
		--wp--preset--color--secondary
	); /* announcement / top-strip = indigo */

	/* ── brand palette + utility (values live in theme.json) ─────────────────── */

	--kd-color-tint: var(--wp--preset--color--tint);
	/* ── Accent rotation ──────────────────────────────────────────────────────
	   A small ordered set for decorative sequences that need to cycle through
	   distinct hues — values rows, stat rows, icon sets. Deliberately FOUR, and
	   deliberately drawn from the brand palette rather than an arbitrary
	   rainbow: a starter should not ship a client's campaign colours. Add more
	   only if a design genuinely needs them. */
	--kd-color-accent-1: var(--wp--preset--color--primary);
	--kd-color-accent-2: var(--wp--preset--color--accent);
	--kd-color-accent-3: var(--wp--preset--color--accent-2);
	--kd-color-accent-4: var(--wp--preset--color--contrast);
	--kd-color-surface: var(--wp--preset--color--surface);

	/* Recognition-card gradient — the no-photo carousel card (card-carousel.css).
	   Brand primary at the left edge running to the secondary at the right, on a
	   shallow diagonal. Both stops are palette tokens (no raw hex), so the card
	   tracks the brand when theme.json changes. Shows only where no photo is
	   supplied: a card given a photo sets it as an INLINE background-image,
	   which beats this stylesheet. */
	--kd-gradient-rec-card: linear-gradient(
		105deg,
		var(--kd-color-primary),
		var(--kd-color-secondary)
	);
	--kd-color-error: var(--wp--preset--color--error); /* form error #DF0808 */

	/* ── Buttons — roles cascade from the theme.json palette (no hardcoded hex) ── */

	--kd-btn-bg: var(--kd-color-primary); /* primary fill — purple */
	--kd-btn-fg: var(--kd-color-base); /* primary text — white */
	--kd-btn-bg-hover: var(--kd-color-secondary); /* hover — indigo (spec) */
	--kd-btn-outline: var(--kd-color-primary); /* outline border + text */
	--kd-btn-outline-hover: var(
		--kd-color-secondary
	); /* outline hover — indigo */
	--kd-btn-link: var(--kd-color-primary); /* text-link color */
	--kd-btn-link-accent: var(
		--kd-color-secondary
	); /* text-link hover — indigo */
	/* Minimum button width: stops short labels ("Go") rendering as stubs.
	   Opt out per component with `--kd-btn-min-w: 0` (header CTAs do). */
	--kd-btn-min-w: 11.25rem; /* 180px */

	/* ── Font size aliases (values live in theme.json) ──────────────────────── */

	--kd-size-xs: var(
		--wp--preset--font-size--small
	); /* 0.88rem / 14px — eyebrow */
	--kd-size-eyebrow: var(--wp--preset--font-size--small); /* 0.88rem / 14px */
	--kd-size-body: var(--wp--preset--font-size--medium); /* 1rem    / 16px */
	--kd-size-body-lg: var(--wp--preset--font-size--large); /* 1.15rem / 18px */
	--kd-size-h6: var(--wp--preset--font-size--small); /* 0.88rem  */
	--kd-size-h5: var(--wp--preset--font-size--medium); /* 1rem     */
	--kd-size-h4: var(--wp--preset--font-size--small); /* 0.88rem — eyebrow */
	--kd-size-h3: var(--wp--preset--font-size--x-large); /* 1.5rem   */
	--kd-size-h2: var(
		--wp--preset--font-size--xx-large
	); /* 1.75rem — DOCUMENT-scale h2 (exceptions: .kd-prose, tier/card/band headings) */
	--kd-size-section-title: var(
		--wp--preset--font-size--section-title
	); /* clamp 32→50px — the default h2 (theme.json) */
	--kd-size-h1: var(--wp--preset--font-size--huge); /* 3.4rem   */
	--kd-size-banner: var(
		--wp--preset--font-size--gigantic
	); /* 5rem  — hero XL */
	--kd-size-btn: 1.125rem; /* 18px — button label */

	/* ── Font family aliases (values live in theme.json) ────────────────────── */

	--kd-font-heading: var(--wp--preset--font-family--heading);
	--kd-font-body: var(--wp--preset--font-family--body);

	/* ── Typography ─────────────────────────────────────────────────────────── */

	--kd-fw-body: 400;
	--kd-fw-heading: 900;

	--kd-lh-tight: 1.2; /* h1 */
	--kd-lh-mid: 1.3; /* h3, h4 */
	--kd-lh-loose: 1.4; /* h5, h6 */
	--kd-lh-body: 1.75; /* body, paragraphs */

	/* ── Spacing ─────────────────────────────────────────────────────────────── */

	--kd-space-xs: 0.5rem; /*  8px */
	--kd-space-sm: 1rem; /* 16px */
	--kd-space-md: 1.5rem; /* 24px */
	--kd-space-lg: 2.5rem; /* 40px */
	--kd-space-xl: 4rem; /* 64px */
	--kd-space-xxl: 6rem; /* 96px */

	/* ── Layout container ─────────────────────────────────────────────────────────
	   Single source of truth for the page width + side gutters. The gutter is
	   proportional to the viewport (Figma footer = 7.64% ≈ 110px at 1440), so it
	   GROWS on large screens and CLIPS on small ones, while the content is CAPPED
	   on extra-large screens. `--kd-edge-pad` = the gutter until the content hits
	   the cap, then centering takes over. Header/footer/badge all pad with it so
	   every band lines up with the FSE content column (theme.json mirrors these:
	   layout.contentSize = --kd-content-max, root padding = --kd-gutter). */
	/* ── The composition width ───────────────────────────────────────────────
	   ONE number drives the content column, the card-grid bounds and the split
	   composition. It is DERIVED, not asserted: the site's widest repeating
	   unit is a 3-card row, so the column is exactly three Figma cards plus
	   their two gaps. Change --kd-card-w and the band follows, which is what
	   keeps the grid fitting and the carousels chrome-free.
	   (3 × 24.5rem + 2 × 1.5rem = 76.5rem = 1224px.)

	   This matches the design's own column. Figma draws ONE content column on
	   its 1440 canvas and every band honours it: footer content 110→1330 with
	   the copyright rule literally w=1220 (0:24) and the divider w=1220 (0:8);
	   nav logo at x=113 with the Donate button ending at 1317 (0:25 / 0:26);
	   hero heading + subtitle at x=110 (226:2320 / 226:2321). Backgrounds are
	   full-bleed 1440 — only the CONTENT is columned.

	   1224 rather than the footer's literal 1220 because the grid needs the
	   extra 4px: at 1220 the three package tiers stop fitting and the carousel
	   shows arrows on desktop, contradicting the "3 tiers fit clean, no
	   chrome" behaviour locked in c641317. (The carousel track's own gap is
	   20px, not 24 — 3×392 + 2×20 = 1216 — so the GRID is the binding
	   constraint and the carousel rides with 8px to spare.)

	   Crossover is the design width itself: the gutter is 7.64%, and
	   7.64% × 1440 = 110 while (1440 − 1220)/2 = 110 — so at or below ~1445
	   the gutter still wins and NOTHING changes. Only wide screens move.
	   (Was 1600, briefly 1512; both were wider than anything drawn, which is
	   what let the split media inflate to 762px @1920.) */
	--kd-card-w: 24.5rem; /* 392px — Figma card (258:2565 image inner 343+2×24) */
	--kd-composition: calc(3 * var(--kd-card-w) + 2 * var(--kd-space-md));
	--kd-content-max: var(--kd-composition); /* 1224px */
	--kd-gutter: clamp(1.25rem, 7.64vw, 9rem); /* 20px → 7.64vw → 144px */
	/* ⚠️ CONTEXT-DEPENDENT TOKEN. The `%` in the centering term resolves against the
	   containing block of the element that USES the token (padding/margin %), not
	   against the viewport. So:
	   • `--kd-edge-pad` is correct ONLY on an element whose containing block is the
	     FULL viewport-wide row (header/footer bands, an alignfull cover/group that
	     is a direct child of a full-width parent). Inside a narrower box the term
	     goes short or negative and max() silently falls back to the gutter — the
	     bug is invisible at 1440, where both terms equal 110px.
	   • `--kd-edge-pad-half` is for an element INSIDE a 50% column of a full-width
	     row (split/two-up bands): there the full row is 200% of the containing
	     block. Exact only for a 50/50 row with ZERO column gap (a gap of g shifts it
	     by g/2), and only while the columns sit side by side — a stacked column
	     is 100% wide, so the 200% term overshoots (≈613–781px). Reference fix: a client build (see vault).
	     No pattern in this theme consumes it yet — it ships for split bands built on
	     a fork.
	   • Inside any other box (e.g. a constrained `.entry-content` child) use
	     `--kd-gutter`, not this token. A `100vw`-based form was rejected: `100vw`
	     includes the classic scrollbar (~15px on Windows), so the band would sit
	     7.5px off the body column that WP centres on the scrollbar-less width. */
	--kd-edge-pad: max(
		var(--kd-gutter),
		calc((100% - var(--kd-content-max)) / 2)
	);
	--kd-edge-pad-half: max(
		var(--kd-gutter),
		calc((200% - var(--kd-content-max)) / 2)
	);

	/* Inner content measures — semantic caps for content NARROWER than the column.
	   Single source of truth (was hardcoded per-pattern from Figma x-coordinates).
	   Each is min(measure, 100%) so it degrades cleanly on small screens instead of
	   overflowing — Figma's fixed canvas doesn't account for smaller viewports. */
	/* ~1000px — prose/reading column (Figma body col x=116) */
	--kd-measure-reading: min(62.5rem, 100%);
	/* ~574px — section intro / archive lede */
	--kd-measure-intro: min(35.875rem, 100%);
	/* ~555px — portrait / caption / tight column */
	--kd-measure-narrow: min(34.75rem, 100%);
	/* ~784px — centred card group (cpt-section) */
	--kd-measure-card: min(49rem, 100%);
	/* 1224px — 3-card grid bounds. Derived from the same composition as the
	   content column, so grid and band can never drift apart. */
	--kd-measure-grid: min(var(--kd-composition), 100%);
	/* 1224px — split composition (media + gap + text). Same value as the grid,
	   so a split shares its edge with any card grid on the page. Figma draws
	   the split at 500 media + ~100 gap + 568 text ≈ 1170 on a 1220 column
	   (About 226:2478/2479, 226:2484/2485, 276:5384); the cap is what stops
	   the columns from simply halving whatever band they are handed. */
	--kd-measure-split: min(var(--kd-composition), 100%);
	/* 807px — CTA-band card island */
	--kd-measure-cta: min(807px, 100%);
	/* ~595px — Gravity Forms column (wizard step row fits on one line) */
	--kd-measure-form: min(37.1875rem, 100%);

	--kd-mainbar-height: 84px; /* primary nav bar height — also the sticky sub-nav dock offset */

	/* ── Internal rhythm — consistent gaps within patterns ───────────────────── */

	--kd-gap-tight: 0.5rem; /*  8px — heading → paragraph, subtitle → heading */
	--kd-gap-normal: 0.75rem; /* 12px — icon → label, icon → heading */
	--kd-gap-wide: 2rem; /* 32px — image → heading (cards) */
	--kd-gap-section: 2.5rem; /* 40px — section header → content */

	/* ── Border Radius ───────────────────────────────────────────────────────── */

	--kd-radius-sm: 4px;
	--kd-radius-md: 12px;
	--kd-radius-lg: 24px;
	--kd-radius-card: 20px; /* contained content cards — countdown card, Figma 218:2092 */
	--kd-radius-pill: 100px; /* buttons */

	/* ── Transitions ─────────────────────────────────────────────────────────── */

	--kd-transition-fast: 150ms ease;
	--kd-transition-base: 250ms ease;
	--kd-transition-slow: 400ms ease;

	/* ── Shadows ─────────────────────────────────────────────────────────────── */

	--kd-shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
	--kd-shadow-md: 0 4px 20px rgba(0, 0, 0, 0.12);
	--kd-shadow-lg: 0 8px 40px rgba(0, 0, 0, 0.16);
	--kd-shadow-image: 0 4px 10px rgba(0, 0, 0, 0.15); /* split/feature media drop — Figma 226:2478 */
	--kd-shadow-card: 0 4px 10px 6px rgba(0, 0, 0, 0.06); /* subtle white-card lift — countdown card, Figma 218:2092 */

	/* ── Z-index ─────────────────────────────────────────────────────────────── */

	--kd-z-base: 1;
	--kd-z-overlay: 100;
	--kd-z-modal: 200;
	--kd-z-header: 300;
	--kd-z-mobile-overlay: 900;
	--kd-z-mobile-panel: 1000;

	/* ── Navigation (reusable — header/footer menus + off-canvas mobile) ─────────
	   These drive both the KD Starter build and the kd-starter back-port. Re-skin a
	   project by overriding only these, not the rules in global.css. */

	--kd-nav-link: var(--kd-color-contrast); /* nav link on the white bar */
	--kd-nav-link-hover-opacity: 0.78; /* hover dim on the bands */
	--kd-nav-gap: 1.75rem; /* gap between top-level items */
	--kd-nav-font: var(--kd-font-body);
	--kd-nav-weight: 600;
	--kd-nav-size: 0.9375rem;

	/* Desktop dropdowns */
	--kd-dropdown-bg: var(--kd-color-base);
	--kd-dropdown-link: var(--kd-color-contrast);
	--kd-dropdown-link-hover: var(--kd-color-primary);
	--kd-dropdown-radius: var(--kd-radius-md);
	--kd-dropdown-shadow: var(--kd-shadow-md);
	--kd-dropdown-min-width: 240px;

	/* Off-canvas mobile panel */
	--kd-mobile-panel-width: 60%; /* share of screen the panel covers */
	--kd-mobile-panel-max: 90vw; /* never wider than this */
	/* Anchor Navy, not Embolden Blue: white text on the brand primary measures
	   3.81:1, below WCAG AA (4.5:1) for body-size text. Navy gives 14.6:1. */
	--kd-mobile-panel-bg: var(--kd-color-contrast);
	--kd-mobile-panel-fg: var(--kd-color-base);
	--kd-mobile-panel-pad: 2rem;
	--kd-mobile-panel-shadow: -8px 0 40px rgba(0, 0, 0, 0.25);
	--kd-mobile-overlay-bg: rgba(0, 0, 0, 0.5); /* black, transparent */
	--kd-mobile-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
	--kd-mobile-breakpoint: 768px; /* (reference; media queries can't read vars) */

	/* Hamburger */
	--kd-burger-bar: var(--kd-color-base);
	--kd-burger-width: 26px;
	--kd-burger-bar-height: 2.5px;

	/* ── Footer (reusable — every page's footer band) ───────────────────────────
	   Measure caps paragraph line-length inside the footer columns. The columns
	   (36%/36%/28% of 1512px) are far wider than comfortable prose, so an uncapped
	   paragraph sprawls and the spacing reads loose. Re-skin by overriding here. */
	--kd-footer-measure: 22rem; /* ~352px — max line-length for footer column paragraphs */

	/* ── Hero ─────────────────────────────────────────────────────────────────── */
	--kd-hero-interior-min: 452px; /* interior page hero band height (Figma 226:2585) */
	--kd-hero-content-top: 134px; /* breadcrumb sits exactly 50px below the badge bottom (top-anchored) */
	--kd-no-hero-top: 134px; /* clears the 168px badge (~84px overflow) + 50px breathing room, matching the hero */

	/* ── Section rhythm ──────────────────────────────────────────────────────────
	   Single gap applied ONCE as margin-block-start between every pair of stacked
	   .entry-content children (owl selector). STEPPED to honor the designer's
	   discrete breakpoint chips exactly (Figma spacing block 2085:1937):
	   Desktop ≥1024px = 120px · Tablet 768–1024px = 96px · Mobile <768px = 64px.
	   (A single clamp(64px,8vw,120px) can't hit all three — it only reaches 96px
	   at ~1200px, missing the 768–1024 tablet band — so we step instead.)
	   Overrides live just below this :root block (custom props can't be redefined
	   in a nested media query). Desktop value is the default here. */
	--kd-section-gap: 7.5rem; /* 120px — desktop (≥1024px) */

	/* ── Band internal padding ────────────────────────────────────────────────────
	   Breathing room INSIDE colored/banded sections — independent of the rhythm gap.
	   Sections that override (e.g. .kd-values-section at 60→84px) keep their own
	   per-band clamp. Plain (no-background) sections get zero vertical padding —
	   the margin-gap is the only space between them. */
	--kd-band-pad-y: clamp(3.5rem, 5.5vw, 5.5rem); /* 56px → 88px */
}

/* ── Section rhythm — stepped breakpoint overrides ──────────────────────────────
   Desktop-first (matches the theme's existing max-width media queries). Honors the
   designer's discrete chips: 96px in the tablet band, 64px on mobile. */
@media (max-width: 1023.98px) {
	:root {
		--kd-section-gap: 6rem; /* 96px — tablet (768–1023.98px) */
	}
}

@media (max-width: 767.98px) {
	:root {
		--kd-section-gap: 4rem; /* 64px — mobile (<768px) */
	}
}