/*
 * Progressive Diagnostics — design tokens (single source of truth).
 *
 * HOW IT WORKS
 * 1. Brand colours live as :root custom properties under the same slugs used in
 *    theme.json, the GeneratePress Global Colours (functions.php) and the
 *    homepage markup — so var(--blue), var(--ink), var(--paper)… resolve the
 *    same everywhere. Re-skin the whole site by editing these values once.
 * 2. Type / space / radius / motion tokens use a --pd-* prefix so they never
 *    collide with GeneratePress' own --gp / semantic variables.
 * 3. pd-components.css builds the .pd-* component classes on top of these.
 *    theme.json surfaces the same values as editor swatches / size pickers.
 *
 * Derived from brand/redesign/homepage-modern.html — the canonical design.
 * Keep this file authoritative: change a token here, not in a component rule.
 */

:root {
	/* ── Brand colour (matches BRAND-GUIDE §6, theme.json, GP Global Colours) ── */
	--blue:       #009CD8;   /* primary accent */
	--blue-d:     #0683B2;   /* hover / pressed / links */
	--sky:        #3CB4E4;   /* highlight, eyebrows on dark */
	--tint:       #B4E4F0;   /* quiet bg, icon chips, badges */
	--tint-wash:  #EEF6FB;   /* card hover wash */

	--ink:        #16242B;   /* headings, dark sections */
	--slate:      #46555D;   /* body text */
	--muted:      #73828A;   /* secondary / captions */
	--paper:      #F6F8F9;   /* section background */
	--line:       #E4EBEE;   /* hairline border */
	--line-2:     #D4DEE2;   /* strong border / inputs */
	--footer-ink: #0F1B21;   /* footer background */
	--white:      #FFFFFF;

	/* On-ink (dark-section) text ramp */
	--on-ink:       #FFFFFF;
	--on-ink-body:  #C5D2D8;
	--on-ink-muted: #8C9AA0;
	--on-ink-line:  rgba(255, 255, 255, .12);

	/* State colours (forms) */
	--error:   #C0563D;
	--success: #1F7A4D;

	/* ── Type ── */
	--pd-font-display: 'Newsreader', Georgia, 'Times New Roman', serif;
	--pd-font-text:    'Inter', Arial, system-ui, sans-serif;
	--pd-font-mono:    'JetBrains Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;

	--pd-text-label:   12px;    /* eyebrow */
	--pd-text-small:   13.5px;
	--pd-text-body:    17px;
	--pd-text-lead:    18.5px;
	--pd-text-h3:      22px;
	--pd-text-h2:      clamp(28px, 3.4vw, 38px);
	--pd-text-h1:      clamp(36px, 5vw, 48px);
	--pd-text-display: clamp(40px, 5.4vw, 62px);

	--pd-leading:      1.6;
	--pd-leading-tight: 1.14;

	/* ── Space ── */
	--pd-space-xs:  8px;
	--pd-space-sm:  16px;
	--pd-space-md:  24px;
	--pd-space-lg:  32px;
	--pd-space-xl:  48px;
	--pd-space-2xl: 64px;
	--pd-section:   clamp(64px, 8vw, 96px);   /* vertical section rhythm */
	--pd-gutter:    24px;                       /* horizontal section padding */

	/* ── Shape ── */
	--pd-radius-sm: 6px;    /* controls: buttons, inputs */
	--pd-radius:    10px;   /* cards / tiles */
	--pd-radius-lg: 16px;   /* feature panels */
	--pd-radius-pill: 30px;

	--pd-btn-pad: 13px 24px;
	--pd-focus-ring: 0 0 0 3px rgba(0, 156, 216, .14);

	/* ── Layout ── */
	--pd-container: 1200px;

	/* ── Motion (flat brand — no bounce) ── */
	--pd-ease: cubic-bezier(.22, .61, .36, 1);
	--pd-transition: .2s ease;
}