/*
 * SAIF Design Tokens
 *
 * Source of truth: Figma file MlRb4yaCluvlQA1EssCKLQ (layer values).
 * Token *values* are updated here when the designer finalises the palette.
 * Widget code references these custom properties — it never uses raw values.
 *
 * Do NOT use raw hex/px/font values anywhere in widgets.css or widget PHP.
 */

:root {
	/* ── Colour ─────────────────────────────────────────────── */
	--sf-color-ink:          #2a3d64; /* display headings, primary CTA */
	--sf-color-ink-deep:     #193f74; /* body copy, secondary CTA text  */
	--sf-color-accent:       #794528; /* card headings, accent buttons   */
	--sf-color-cream:        #ebe4d8; /* cream button fill, surfaces     */
	--sf-color-surface-dark: #000000; /* footer background               */
	--sf-color-white:        #ffffff; /* text on dark, menu CTA          */
	--sf-color-muted:        #cecece; /* meta text, secondary links      */

	/* ── Typography — family ────────────────────────────────── */
	--sf-font-primary:  'poppins', sans-serif;
	--sf-font-wordmark: 'Lato', sans-serif; /* footer wordmark only */

	/* ── Typography — size scale (desktop) ─────────────────── */
	--sf-size-display: 50px;
	--sf-size-h2:      30px;
	--sf-size-wordmark:22px;
	--sf-size-lead:    18px;
	--sf-size-eyebrow: 18px;
	--sf-size-body:    16px;
	--sf-size-link:    16px;
	--sf-size-button:  14px;
	--sf-size-meta:    14px;

	/* ── Typography — line height ───────────────────────────── */
	--sf-lh-display: 65px;
	--sf-lh-h2:      36px;
	--sf-lh-lead:    30px;
	--sf-lh-body:    normal;

	/* ── Buttons ────────────────────────────────────────────── */
	--sf-btn-height: 47px;
	--sf-btn-radius: 200px;
	--sf-btn-border: 2px;

	/* ── Hero section ───────────────────────────────────────── */
	--sf-hero-image-radius: 70px;
}

/* Mobile scale overrides */
@media (max-width: 767px) {
	:root {
		--sf-size-display: 30px;
		--sf-lh-display:   38px;
	}
}