/*
 * SAIF Homepage 2026 Design Tokens (--hwc-*)
 *
 * Source of truth: Figma file MlRb4yaCluvlQA1EssCKLQ
 *   Desktop frame 2959:206 "HOME PAGE 10 (25/09/2026)"   — 1440 wide
 *   Mobile frame  2959:325 "HOME PAGE V10 (25/09/2026)"  — 390 wide
 * The file defines no Figma variables, so every value comes from layer styles.
 *
 * Only values that are NEW or DIFFERENT from tokens.css live here. Where a
 * desktop value matches an existing --sf-* token, the role token points at it
 * (e.g. var(--sf-size-h2)) so the link is explicit.
 *
 * Role tokens are responsive: the same name gets its mobile value in the
 * max-width: 767px block below (matches the tokens.css mobile override
 * breakpoint). Widget CSS just uses the role token and never needs its own
 * font-size media queries.
 *
 * --sf-* tokens are live site-wide and must never be changed for the
 * redesign — add new values here instead.
 *
 * Enqueued globally (functions.php) so a future Theme Builder header/footer
 * can use these tokens too.
 */

:root {
	/* ── Colour ─────────────────────────────────────────────── */
	/* Gold accent: buttons, gold headings, arrow links. Differs from
	   --sf-color-accent (#794528); the Figma footer still uses the old value. */
	--hwc-color-accent:      #795728;
	--hwc-color-placeholder: #d9d9d9; /* empty video/image slot background */

	/* ── Typography — role sizes (desktop) ──────────────────── */
	--hwc-size-section-title: var(--sf-size-h2);   /* 30px centred navy section titles */
	--hwc-size-card-title:    var(--sf-size-h2);   /* 30px gold headings ("You have more choices…") */
	--hwc-size-h3:            25px;                /* content headings ("Take it one step at a time") */
	--hwc-size-lead:          var(--sf-size-lead); /* 18px hero subheading */
	--hwc-size-eyebrow:       var(--sf-size-eyebrow); /* 18px Medium uppercase underlined */
	--hwc-size-quote:         var(--sf-size-h2);   /* 30px pull quote */
	--hwc-size-testimonial:   var(--sf-size-h2);   /* 30px white testimonial quote */
	--hwc-size-attribution:   var(--sf-size-body); /* 16px italic quote / testimonial attribution */
	--hwc-size-video-title:   var(--sf-size-lead); /* 18px video overlay + video card title */
	--hwc-size-video-meta:    var(--sf-size-body); /* 16px video duration */
	--hwc-size-nav:           15px;                /* header nav links (Medium) */
	--hwc-size-caption:       12px;                /* photo caption name (Bold) */
	--hwc-size-caption-sm:    10px;                /* photo caption role/location (Regular) */

	/* ── Typography — role line heights (desktop) ───────────── */
	--hwc-lh-section-title: 41px;
	--hwc-lh-card-title:    var(--sf-lh-h2); /* 36px */
	--hwc-lh-h3:            normal;
	--hwc-lh-body:          normal;          /* centred intro/feature body copy */
	--hwc-lh-eyebrow:       55px;
	--hwc-lh-quote:         1.25;
	--hwc-lh-testimonial:   38px;

	/* ── Radius ─────────────────────────────────────────────── */
	--hwc-radius-testimonial: var(--sf-hero-image-radius); /* 70px; testimonial photo, top-left square */

	/* ── Buttons ────────────────────────────────────────────── */
	--hwc-btn-border:    1px;  /* filled variants (outline stays --sf-btn-border, 2px) */
	--hwc-btn-padding-x: 28px;
}

/* Mobile values — Figma frame 2959:325 (390 wide) */
@media (max-width: 767px) {
	:root {
		--hwc-size-section-title: 20px;
		--hwc-size-card-title:    20px;
		--hwc-size-h3:            16px;
		--hwc-size-lead:          var(--sf-size-body); /* 16px */
		--hwc-size-eyebrow:       14px;
		--hwc-size-quote:         25px;
		--hwc-size-testimonial:   var(--sf-size-lead); /* 18px */
		--hwc-size-attribution:   14px;
		--hwc-size-video-title:   10px;
		--hwc-size-video-meta:    10px;
		--hwc-size-caption:       10px;
		--hwc-size-caption-sm:    8px;

		--hwc-lh-section-title: 25px;
		--hwc-lh-card-title:    28px;
		--hwc-lh-body:          21px;
		--hwc-lh-eyebrow:       20px;
		--hwc-lh-testimonial:   24px;

		--hwc-radius-testimonial: 43px;
	}
}