/**
 * Design tokens shared by the Pillar, Keyword Hub and (later) product pages.
 * Components never hard-code these values; they read the variables.
 * Defined on :root so any template can use them; components are scoped under .hr-ui.
 */

:root {
	/* Colors (theme O "morning-mist blue-grey", light throughout). Components read these roles. */
	--hr-color-heading: #0f2236;     /* headings, card titles */
	--hr-color-text: #44536a;        /* body copy */
	--hr-color-secondary: #334155;   /* number-band labels, footer text */
	--hr-color-muted: #52627a;       /* breadcrumb, reviewer, notes, captions, card small text */
	--hr-color-accent: #0369a1;      /* buttons, links, step numbers, hero subtitle, key numbers */
	--hr-color-accent-hover: #075985;
	--hr-color-on-accent: #ffffff;   /* text on accent buttons, badges, step numbers */
	--hr-color-link: var(--hr-color-accent);
	--hr-color-link-hover: var(--hr-color-accent-hover);
	--hr-color-eyebrow: var(--hr-color-accent); /* hero subtitle */
	--hr-color-stat: var(--hr-color-accent);    /* hero key numbers, number band */
	--hr-color-bg-light: #f1f4f8;    /* table header */
	--hr-color-border: #d5dee8;
	--hr-color-surface: #ffffff;     /* cards: the only white besides the site header */
	--hr-color-placeholder: #d5dee8; /* image area before the photo loads */
	--hr-shadow-card: 0 1px 2px rgba(15, 34, 54, 0.06);
	--hr-btn-outline: var(--hr-color-accent); /* outline button border and text */
	--hr-step-num-bg: var(--hr-color-accent);
	--hr-step-num-text: var(--hr-color-on-accent);
	--hr-step-line: var(--hr-color-muted); /* step connector arrows */

	/* Section bands. Content sections alternate A / B; hero, number band and CTA are fixed. */
	--hr-band-a: #f1f4f8;
	--hr-band-b: #e4ebf2;
	--hr-band-hero: #e8eef4;
	--hr-band-cta: #dce8f3;
	--hr-band-data: #d6e2ee;
	--hr-band-grid-size: 48px;       /* grid texture on hero and CTA */
	--hr-band-grid-line: rgba(3, 105, 161, 0.07);
	--hr-band-grid:
		linear-gradient(var(--hr-band-grid-line) 1px, transparent 1px),
		linear-gradient(90deg, var(--hr-band-grid-line) 1px, transparent 1px);

	/* Number band ("numbers" capability layout, factory evidence numbers). */
	--hr-fs-data-number: 2.5rem;     /* 40px */
	--hr-fw-data-number: 900;
	--hr-font-data-number: 'Lato', sans-serif; /* weight 900 loaded in inc/enqueue.php */
	--hr-data-label: var(--hr-color-secondary);

	/* Site header and footer on Pillar / Hub pages. */
	--hr-header-bg: #ffffff;
	--hr-footer-bg: #d2dce7;
	--hr-footer-text: var(--hr-color-secondary);

	/* Legacy alias: older component files still read --hr-color-primary. */
	--hr-color-primary: var(--hr-color-accent);

	/* Type scale (fonts come from Astra: Lato headings, Lora body). */
	--hr-fs-h1: clamp(2rem, 1.25rem + 2.75vw, 3.375rem);  /* 54px desktop, 32px phone */
	--hr-fs-h2: clamp(1.5rem, 1.2rem + 1.2vw, 2.125rem);  /* 34px desktop, 24px phone */
	--hr-fs-h3-xl: 2rem;       /* 32px: certification names (22px on phones) */
	--hr-fs-title: 1.25rem;    /* 20px: step titles, reviewer name */
	--hr-fs-h3: 1.125rem;      /* 18px: card titles, FAQ questions, TOC title */
	--hr-fs-lead: 1.125rem;    /* 18px: answer summary, subtitle */
	--hr-fs-body: 1rem;
	--hr-fs-small: 0.875rem;   /* notes, breadcrumb */
	--hr-fs-xs: 0.8125rem;     /* labels, captions, table header */
	--hr-fs-stat: 1.375rem;    /* hero key numbers */
	--hr-lh-body: 1.7;
	--hr-lh-heading: 1.25;
	--hr-heading-gap: 20px;    /* space under a section H2 */

	/* Spacing. */
	/* Section padding (top and bottom): tablet 0.7x, phone 0.5x of desktop. */
	--hr-section-padding-y: 64px;     /* ordinary sections */
	--hr-section-padding-y-md: 45px;
	--hr-section-padding-y-sm: 32px;
	--hr-band-padding-y: 72px;        /* hero and CTA */
	--hr-band-padding-y-md: 50px;
	--hr-band-padding-y-sm: 36px;
	--hr-data-padding-y: 52px;        /* number band */
	--hr-data-padding-y-md: 36px;
	--hr-data-padding-y-sm: 26px;
	--hr-gutter: 24px;
	--hr-content-max: 1200px;
	--hr-grid-gap: 30px;
	--hr-grid-gap-sm: 20px;
	--hr-card-gap: 24px;

	/* Shape. */
	--hr-radius-sm: 6px;   /* buttons */
	--hr-radius-md: 10px;  /* small boxes: key numbers, TOC, photos */
	--hr-radius-lg: 12px;  /* cards */
	--hr-radius-pill: 999px; /* badges */
	/* Content cards: buyer problems, capability cards, why choose us, Hub cards. */
	--hr-card-padding: 24px;           /* 20px on phones */
	--hr-card-grid-gap: 20px;          /* between cards; 16px on phones */
	--hr-card-title-size: 1.1875rem;   /* 19px; 17px on phones */
	--hr-card-title-lh: 1.3;
	--hr-card-title-weight: 700;
	--hr-card-title-gap: 8px;          /* title → text */
	--hr-card-text-size: 0.9375rem;    /* 15px */
	--hr-card-text-lh: 1.6;
	--hr-card-accent-line: 3px;        /* accent rule along the top of capability-style cards */
	--hr-shadow-hover: 0 15px 35px rgba(0, 0, 0, 0.12);

	/* Buttons. */
	--hr-btn-padding: 14px 28px;
	--hr-btn-border: 2px;
	--hr-btn-weight: 600;

	/* Breakpoints (for reference; media queries cannot read variables). */
	--hr-bp-lg: 921px;
	--hr-bp-md: 768px;
	--hr-bp-sm: 544px;
}

@media (max-width: 921px) {
	:root {
		--hr-section-padding-y: var(--hr-section-padding-y-md);
		--hr-band-padding-y: var(--hr-band-padding-y-md);
		--hr-data-padding-y: var(--hr-data-padding-y-md);
	}
}

@media (max-width: 544px) {
	:root {
		--hr-section-padding-y: var(--hr-section-padding-y-sm);
		--hr-band-padding-y: var(--hr-band-padding-y-sm);
		--hr-data-padding-y: var(--hr-data-padding-y-sm);
		--hr-gutter: 16px;
		--hr-fs-lead: 1rem;
		--hr-fs-h3-xl: 1.375rem;
		--hr-card-padding: 20px;
		--hr-card-grid-gap: 16px;
		--hr-card-title-size: 1.0625rem;
	}
}