/**
 * Design Tokens — Gg
 *
 * 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: --tk (gg) to avoid collisions with WP variables
 */

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

	--kd-color-base: var(
		--wp--preset--color--base
	); /* page background #fffefa */
	--kd-color-contrast: var(
		--wp--preset--color--contrast
	); /* headline ink — black */
	--kd-color-body: var(--wp--preset--color--body-ink); /* body text — black */
	--kd-color-primary: var(
		--wp--preset--color--primary
	); /* red-orange #d62609 — buttons, CTA */
	--kd-color-secondary: var(
		--wp--preset--color--secondary
	); /* maroon #900000 — hover, headings */
	--kd-color-accent: var(
		--wp--preset--color--accent
	); /* maroon — social icon circle */
	--kd-color-white: var(--wp--preset--color--white); /* true white #FFFFFF */
	--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 = maroon */

	/* ── Gracie surfaces + utility (values live in theme.json) ───────────────── */

	--kd-color-maroon: var(--wp--preset--color--secondary); /* headings, gradients, focus */
	--kd-color-maroon-active: var(
		--wp--preset--color--maroon-active
	); /* #6b0000 — button active fill (D2) */
	--kd-color-cream: var(--wp--preset--color--cream); /* footer band, input border */
	--kd-color-input-fill: var(--wp--preset--color--input-fill); /* form input fill */
	--kd-color-error: var(--wp--preset--color--error); /* form error — maroon #900000 */

	/* ── Buttons — roles cascade from the theme.json palette (no hardcoded hex) ──
	   D2 Button/Primary states (Figma 2009:170): Default #d62609 · Hover #900000 ·
	   Focus = default fill + 2px #900000 ring (offset 2px) · Active #6b0000. */

	--kd-btn-bg: var(--kd-color-primary); /* primary fill — red-orange */
	--kd-btn-fg: var(--kd-color-white); /* primary text — white */
	--kd-btn-bg-hover: var(--kd-color-secondary); /* hover — maroon (D2) */
	--kd-btn-bg-active: var(--kd-color-maroon-active); /* active — #6b0000 (D2) */
	--kd-btn-focus-ring: var(--kd-color-secondary); /* focus ring — maroon (D2) */
	--kd-btn-outline: var(--kd-color-primary); /* outline border + text */
	--kd-btn-outline-hover: var(
		--kd-color-secondary
	); /* outline hover — maroon */
	--kd-btn-link: var(--kd-color-primary); /* text-link color */
	--kd-btn-link-accent: var(
		--kd-color-secondary
	); /* text-link hover — maroon */

	/* Button geometry — single source of truth so the primary + GF submit button
	   resize in ONE place (was hardcoded 49px/30px ×5 across gg-buttons.css + forms.css). */
	--kd-btn-height: 49px; /* rendered button height (F3 / D2 2009:170) */
	--kd-btn-padding-x: 30px; /* horizontal padding */

	/* ── Font size aliases (values live in theme.json) ───────────────────────────
	   Gracie's flat 6-value scale (figma-analysis §1): 15/16/17/20/30/36px. No
	   "eyebrow"/"banner" size exists in the spec — legacy NHC-stock patterns that
	   still reference those aliases map to the nearest real Gracie size below. */

	--kd-size-sub-label: var(
		--wp--preset--font-size--sub-label-error
	); /* 0.9375rem / 15px — sub-label, error */
	--kd-size-error: var(--wp--preset--font-size--sub-label-error); /* 15px */
	--kd-size-eyebrow: var(
		--wp--preset--font-size--sub-label-error
	); /* 15px — nearest fit; NHC stock patterns only, no 14px in the Gracie scale */
	--kd-size-body: var(--wp--preset--font-size--body-nav-label); /* 1rem / 16px */
	--kd-size-nav: var(--wp--preset--font-size--body-nav-label); /* 16px */
	--kd-size-label: var(--wp--preset--font-size--body-nav-label); /* 16px — form labels */
	--kd-size-footer-link: var(
		--wp--preset--font-size--footer-link-button
	); /* 1.0625rem / 17px */
	--kd-size-btn: var(--wp--preset--font-size--footer-link-button); /* 17px */
	--kd-size-contact-info: var(--wp--preset--font-size--contact-info); /* 1.25rem / 20px */
	--kd-size-h2: var(--wp--preset--font-size--heading-2); /* 1.875rem / 30px */
	--kd-size-h1: var(--wp--preset--font-size--heading-1); /* 2.25rem / 36px */
	--kd-size-banner: var(
		--wp--preset--font-size--heading-1
	); /* 36px — interior hero title; Gracie has no XL display size */
	--kd-size-h3: var(--wp--preset--font-size--contact-info); /* 20px — not Figma-specified, interpolated */
	--kd-size-h4: var(--wp--preset--font-size--body-nav-label); /* 16px — not Figma-specified */
	--kd-size-h5: var(--wp--preset--font-size--body-nav-label); /* 16px — not Figma-specified */
	--kd-size-h6: var(--wp--preset--font-size--sub-label-error); /* 15px — not Figma-specified */
	--kd-size-body-lg: var(--wp--preset--font-size--contact-info); /* 20px — nearest fit; no 18px in the Gracie scale */
	--kd-size-xs: var(--wp--preset--font-size--sub-label-error); /* 15px — nearest fit; no 14px in the Gracie scale */

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

	--kd-font-heading: var(--wp--preset--font-family--heading); /* Public Sans — headings, nav, form chrome */
	--kd-font-body: var(--wp--preset--font-family--body); /* Inter — body, footer */
	--kd-font-buttons: var(--wp--preset--font-family--buttons); /* DM Sans — button labels only */

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

	--kd-fw-body: 400;
	--kd-fw-medium: 500; /* Public Sans Medium — the recurring heading weight (theme.json's own h1/h2 inline weight); pattern CSS references this so it changes in one place */
	--kd-fw-heading: 600; /* Public Sans SemiBold — the heaviest self-hosted weight (500/600 only, no 900 face) */

	--kd-lh-tight: 1.11; /* interior hero title — 40/36 (figma-analysis §1) */
	--kd-lh-mid: 1.3; /* h3, h4 */
	--kd-lh-loose: 1.4; /* h5, h6 */
	--kd-lh-body: 1.5; /* body, paragraphs — 24/16 (figma-analysis §1) */

	/* ── 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 ─────────────────────────────────────────────────────────
	   TWO knobs fully control the container at every breakpoint:
	     1. --kd-content-max — the DESKTOP content cap. SINGLE SOURCE = theme.json
	        layout.contentSize (this token just mirrors the var WP generates from it),
	        so the width changes in ONE place: theme.json. Currently 1440px (Alain
	        2026-07-15 — was 1216; the designer validates the wider cap). The 112px
	        gutter still constrains it to the design-exact 1216 at a 1440 viewport;
	        only WIDER screens use up to 1440, so the page stops feeling empty.
	     2. --kd-gutter — the side gutter. Proportional 7.78vw (grows down from the
	        112px cap at 1440), stepped to a FIXED 20px below 768 (D1 mobile rule,
	        override below). Header/footer/badge all pad with it so every band lines up.
	   TABLET / MOBILE need no separate content variable: the content there is fluid
	   (viewport − 2×gutter), so --kd-gutter is the only knob — the cap only bites on
	   wide desktop where content would otherwise exceed --kd-content-max. */
	--kd-content-max: var(--wp--style--global--content-size, 1440px); /* derives from theme.json contentSize (now clamp(1440,75vw,1600) — grows to 1600 only on 2×/ultra-wide) */
	--kd-measure: 40rem; /* 640px ≈ 65–75ch — MAX WIDTH for long-form body PARAGRAPHS (readability). Decoupled from --kd-content-max ON PURPOSE: the container/layout can grow wide on x-large screens while text stays a comfortable measure. Apply to body copy (media-split body, prose, etc.). Tweak here in one place. */
	--kd-gutter: clamp(1.25rem, 7.78vw, 7rem); /* 20px floor → 7.78vw → 112px cap (matches 1440: 112+1216+112) */
	--kd-edge-pad: max(
		var(--kd-gutter),
		calc((100% - var(--kd-content-max)) / 2)
	);
	--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-0 is the reusable "explicitly square" step: reference it instead
	   of a bare `border-radius: 0` so intent is named and it carries into cloned
	   themes. Gracie is a square design → --kd-radius-0 is the default for content,
	   media, cards, buttons, and inputs. The rest of the scale is the theme's radius
	   vocabulary (kept for reuse); round is reserved for icon badges (literal 50%). */
	--kd-radius-0: 0;

	--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; /* form inputs (forms.css) — buttons are square (see gg-buttons.css) */

	/* ── 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) ─────────
	   Nav links: Public Sans Medium 16px (figma-analysis §1). These drive both the
	   GG 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-base); /* on-band link color (white) */
	--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-heading); /* Public Sans */
	--kd-nav-weight: 500; /* Medium */
	--kd-nav-size: 1rem; /* 16px */

	/* 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 */
	--kd-mobile-panel-bg: var(--kd-color-primary);
	--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; /* NOTE: NHC-stock value (Figma 226:2585, a different project) — Gracie's own interior banner spec is 218px desktop / 140px mobile (figma-analysis §1, decision-log D1); flagged for F5 (header/hero part) to correct, not touched here (out of F1's theme.json/tokens.css scope) */
	--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, global.css). Gracie's rhythm is a
	   two-tier BREAKPOINT switch (not fluid), locked by figma-analysis §1 +
	   decision-log: 100px ≥768px, 64px <768px. Override lives just below this
	   :root block (custom props can't be redefined in a nested media query). */
	--kd-section-gap: 6.25rem; /* 100px — desktop + tablet (≥768px) */

	/* ── Type scale — mobile derivations (D1, decision-log) ─────────────────────
	   H1 36→28px (line-height 40→34), H2 30→24px (line-height 46→32) below 768.
	   Desktop values come from theme.json (styles.elements.h1/h2); only the <768
	   override lives here, applied directly to the h1/h2 elements below. */
}

/* ── Section rhythm + type scale — stepped breakpoint overrides ─────────────────
   Desktop-first (matches the theme's existing max-width media queries). */
@media (max-width: 767.98px) {
	:root {
		--kd-section-gap: 4rem; /* 64px — mobile (<768px), D1 */
		--kd-gutter: 1.25rem; /* 20px, D1 */
	}

	/* Gutter: D1 calls for a FIXED 20px on mobile, not the proportional 7.78vw
	   value (which would compute ~29px at 375px) — override the clamp's live
	   value at this breakpoint. WP's global styles declare
	   --wp--style--root--padding-left/right DIRECTLY on `body` (not `:root`),
	   so a `body` element always uses its own declared value over an inherited
	   `:root` one regardless of source order — the override has to target
	   `body` itself to win. */
	body {
		--wp--style--root--padding-left: 1.25rem;
		--wp--style--root--padding-right: 1.25rem;
	}

	/* H1/H2 mobile derivation (D1, decision-log): 36→28 / 30→24. A single clamp()
	   can't hit both the 1440 desktop value and this exact fixed mobile value at
	   375 without also drifting between 768–1440, so this is a breakpoint override
	   per the F1 build instructions, not a fluid clamp.

	   ⚠ BLOCKED — REQUIRES A SERIALIZED global.css EDIT (out of the F1/F2/F3 wave
	   license; flagged in handoff, NOT worked around with an !important war here).
	   Verified live 2026-07-14 that assets/css/global.css carries stale NHC-era
	   heading rules that beat this override AND corrupt the desktop band, because
	   `!important` wins over any non-important rule regardless of load order and
	   theme.json only emits 0-specificity :where() element styles:
	     • @media (max-width:1024px)  h1 2.5rem!  → 40px,   h2 1.6rem!  → 25.6px
	       (corrupts the 768–1024 band where the spec wants h1 36 / h2 30)
	     • @media (max-width:768px)   h1 2.125rem! → 34px,  h2 1.5rem!  → 24px
	     • @media (max-width:480px)   h1 1.85rem! → 29.6px, h2 1.4rem!  → 22.4px
	       (this is what renders at 375, so the h1{28}/h2{24} rule below is DOA)
	     • @media (max-width:768px)   body { line-height:1.6 } → body p renders
	       lh 25.6 not 24 (spec says body is unchanged on mobile)
	   These blocks also target dead classes (.has-huge/xx-large/x-large-font-size)
	   absent from the gg type scale. FIX = delete the heading blocks + the body
	   line-height:1.6 from global.css; then theme.json gives 36/30 at ≥768.01 and
	   the override below gives 28/24 at <768, matching D1 exactly. The rules below
	   are correct and take effect the moment that cleanup lands. */
	h1 {
		font-size: 1.75rem; /* 28px */
		line-height: 1.214; /* 34/28 */
	}

	h2 {
		font-size: 1.5rem; /* 24px */
		line-height: 1.333; /* 32/24 */
	}
}