/**
 * 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(--blg-*)
 * Prefix: --blg-* (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) ─────────────────── */

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

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

	--blg-color-accent-1: var(--wp--preset--color--primary); /* form focus */
	--blg-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. */
	--blg-color-accent-1: var(--wp--preset--color--primary);
	--blg-color-accent-2: var(--wp--preset--color--accent);
	--blg-color-accent-3: var(--wp--preset--color--accent-2);
	--blg-color-accent-4: var(--wp--preset--color--contrast);
	--blg-color-surface: var(--wp--preset--color--surface);
	--blg-color-error: var(--wp--preset--color--error); /* form error #DF0808 */

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

	--blg-btn-bg: var(--blg-color-primary); /* primary fill — purple */
	--blg-btn-fg: var(--blg-color-base); /* primary text — white */
	--blg-btn-bg-hover: var(--blg-color-secondary); /* hover — indigo (spec) */
	--blg-btn-outline: var(--blg-color-primary); /* outline border + text */
	--blg-btn-outline-hover: var(
		--blg-color-secondary
	); /* outline hover — indigo */
	--blg-btn-link: var(--blg-color-primary); /* text-link color */
	--blg-btn-link-accent: var(
		--blg-color-secondary
	); /* text-link hover — indigo */

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

	--blg-size-xs: var(
		--wp--preset--font-size--small
	); /* 0.88rem / 14px — eyebrow */
	--blg-size-eyebrow: var(
		--wp--preset--font-size--small
	); /* 0.88rem / 14px */
	--blg-size-body: var(--wp--preset--font-size--medium); /* 1rem    / 16px */
	--blg-size-body-lg: var(
		--wp--preset--font-size--large
	); /* 1.15rem / 18px */
	--blg-size-h6: var(--wp--preset--font-size--small); /* 0.88rem  */
	--blg-size-h5: var(--wp--preset--font-size--medium); /* 1rem     */
	--blg-size-h4: var(--wp--preset--font-size--small); /* 0.88rem — eyebrow */
	--blg-size-h3: var(--wp--preset--font-size--x-large); /* 1.5rem   */
	--blg-size-h2: var(--wp--preset--font-size--xx-large); /* 1.75rem  */
	--blg-size-h1: var(--wp--preset--font-size--huge); /* 3.4rem   */
	--blg-size-banner: var(
		--wp--preset--font-size--gigantic
	); /* 5rem  — hero XL */
	--blg-size-btn: 1.125rem; /* 18px — button label */

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

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

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

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

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

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

	--blg-space-xs: 0.5rem; /*  8px */
	--blg-space-sm: 1rem; /* 16px */
	--blg-space-md: 1.5rem; /* 24px */
	--blg-space-lg: 2.5rem; /* 40px */
	--blg-space-xl: 4rem; /* 64px */
	--blg-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. `--blg-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 = --blg-content-max, root padding = --blg-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 --blg-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.) */
	--blg-card-w: 24.5rem; /* 392px — Figma card (258:2565 image inner 343+2×24) */
	--blg-composition: calc(3 * var(--blg-card-w) + 2 * var(--blg-space-md));
	--blg-content-max: var(--blg-composition); /* 1224px */
	--blg-gutter: clamp(1.25rem, 7.64vw, 9rem); /* 20px → 7.64vw → 144px */
	--blg-edge-pad: max(
		var(--blg-gutter),
		calc((100% - var(--blg-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) */
	--blg-measure-reading: min(62.5rem, 100%);
	/* ~574px — section intro / archive lede */
	--blg-measure-intro: min(35.875rem, 100%);
	/* ~555px — portrait / caption / tight column */
	--blg-measure-narrow: min(34.75rem, 100%);
	/* ~784px — centred card group (cpt-section) */
	--blg-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. */
	--blg-measure-grid: min(var(--blg-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. */
	--blg-measure-split: min(var(--blg-composition), 100%);
	/* 807px — CTA-band card island */
	--blg-measure-cta: min(807px, 100%);

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

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

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

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

	--blg-radius-sm: 4px;
	--blg-radius-md: 12px;
	--blg-radius-lg: 24px;
	--blg-radius-card: 16px; /* contained content cards — BLGA radius/card token (Figma BLGA Tokens) */
	--blg-radius-pill: 100px; /* buttons */

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

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

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

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

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

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

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

	--blg-nav-link: var(--blg-color-contrast); /* nav link on the white bar */
	--blg-nav-link-hover-opacity: 0.78; /* hover dim on the bands */
	/* ── Section heading scale ────────────────────────────────────────────────
	   ONE size for the H2 that titles a full-width content band. Before this
	   token, ~15 pattern partials each set their own and they had drifted into
	   two camps: a 32→50px display scale (split, card-grid, carousel, countdown,
	   support) and a 28→32px scale (values-row, steps-row, local-help,
	   upcoming-events, spotlight, 2up). About showed the first, Join the second,
	   on the same site — Alain: "the h2 are not the right size here, don't we
	   have a global size for h2?". We do now.

	   The 50px ceiling is the one the approved Figma comps use for a section
	   head (`.kd-split__heading`, pixel-verified during the split build), so the
	   display scale won rather than the smaller one.

	   NOT for card headings, inset heads, or the "More news"/"More stories"
	   secondary heads on singles — those are a different role and keep their own
	   smaller sizes. */
	--blg-size-h2-section: clamp(2rem, 3.5vw, 3.125rem); /* 32 → 50px */
	--blg-lh-h2-section: 1.08;

	--blg-nav-gap: 1.75rem; /* gap between top-level items */
	--blg-nav-font: var(--blg-font-body);
	--blg-nav-weight: 600;
	--blg-nav-size: 0.9375rem;

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

	/* Off-canvas mobile panel */
	--blg-mobile-panel-width: 60%; /* share of screen the panel covers */
	--blg-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. */
	--blg-mobile-panel-bg: var(--blg-color-contrast);
	--blg-mobile-panel-fg: var(--blg-color-base);
	--blg-mobile-panel-pad: 2rem;
	--blg-mobile-panel-shadow: -8px 0 40px rgba(0, 0, 0, 0.25);
	--blg-mobile-overlay-bg: rgba(0, 0, 0, 0.5); /* black, transparent */
	--blg-mobile-transition: 320ms cubic-bezier(0.4, 0, 0.2, 1);
	--blg-mobile-breakpoint: 768px; /* (reference; media queries can't read vars) */

	/* Hamburger */
	--blg-burger-bar: var(--blg-color-base);
	--blg-burger-width: 26px;
	--blg-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. */
	--blg-footer-measure: 22rem; /* ~352px — max line-length for footer column paragraphs */

	/* ── Hero ─────────────────────────────────────────────────────────────────── */
	--blg-hero-interior-min: 452px; /* interior page hero band height (Figma 226:2585) */
	--blg-hero-content-top: 134px; /* breadcrumb sits exactly 50px below the badge bottom (top-anchored) */
	--blg-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. */
	--blg-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. */
	--blg-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 {
		--blg-section-gap: 6rem; /* 96px — tablet (768–1023.98px) */
	}
}

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

/* ── Hero tokens — mobile step-down (moved from global.css per r5 review; matches
   the --blg-section-gap responsive-token precedent above) ─────────────────────── */
@media (max-width: 768px) {
	:root {
		--blg-hero-interior-min: 240px;
		--blg-hero-content-top: var(--blg-space-lg); /* 40px */
		--blg-no-hero-top: 56px;
	}
}