/* =============================================================================
   global.css — Design Tokens
   =============================================================================
   All CSS custom properties for the site live here.
   Block stylesheets reference these variables — never hard-code values
   in block CSS. To retheme for a new site, update this file only.

   Load order: global.css → block style.css (via block.json "style" key)
   Enqueued via wp_enqueue_scripts in functions.php.
============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;600&family=Inter:wght@400;600&family=Marcellus&display=swap');

:root {

	/* -------------------------------------------------------------------------
	   Colours
	------------------------------------------------------------------------- */
	--clr-hero-gradient-start : #93704A;
	--clr-hero-gradient-end   : #C4A27D;
	--clr-brand               : #93704A; /* warm brown — headings, links, accents */
	--clr-text-light          : #F5F5F5;
	--clr-text-dark           : #0D0D0D;
	--clr-text-body           : #000000;
	--clr-btn-border          : #4F514C;
	--clr-btn-text            : #4F514C;
	--clr-white               : #FFFFFF;
	--clr-black               : #000000;
	--clr-bg-light            : #F5F5F5; /* light grey page/section background */
	--clr-bg-warm             : #F2EDE8; /* warm off-white section background */
	--clr-bg-card             : #E4DED8; /* warm grey card background */
	--clr-bg-cta              : #EDEDED; /* light grey CTA inner container */
	--clr-text-dark-alt       : #292929; /* near-black for card headings and body */

	/* -------------------------------------------------------------------------
	   Gradients
	------------------------------------------------------------------------- */
	--gradient-hero     : linear-gradient(
		to bottom,
		var(--clr-hero-gradient-start) 0%,
		var(--clr-hero-gradient-end) 100%
	);
	--gradient-card-dark : linear-gradient(180deg, #292929 0%, #545454 100%);
	--gradient-card-gold : linear-gradient(180deg, #93704A 0%, #B7956F 100%);
	--clr-btn-hero-bg    : #495748;
	--clr-btn-hero-hover : #93704A;

	/* -------------------------------------------------------------------------
	   Typography — font families
	------------------------------------------------------------------------- */
	--ff-heading : 'Marcellus', Georgia, serif;
	--ff-body    : 'Inter', sans-serif;
	--ff-ui      : 'Figtree', sans-serif;

	/* -------------------------------------------------------------------------
	   Typography — sizes (rem)
	   Base: 1rem = 16px
	------------------------------------------------------------------------- */
	--fs-hero-title    : 3.625rem;  /* 58px ÷ 16 */
	--fs-card-heading  : 1.5rem;     /* 24px ÷ 16 */
	--fs-card-body     : 1.125rem;    /* 18px ÷ 16 */
	--fs-cta-body      : 1.4375rem;  /* 23px ÷ 16 */
	--fs-cta-link      : 1.3125rem;  /* 21px ÷ 16 */
	--fs-col-heading        : 1.625rem;   /* 26px ÷ 16 */
	--fs-col-body           : 1.25rem;    /* 20px ÷ 16 */
	--fs-cta-hero-heading   : 4rem;       /* 64px ÷ 16 */
	--fs-cta-hero-body      : 1.5rem;    /* 24px ÷ 16 */
	--fs-cta-hero-btn       : 1.8125rem;  /* 29px ÷ 16 */
	--fs-home-hero-heading  : 4rem;       /* 64px ÷ 16 — same size */
	--fs-home-hero-body     : 2.25rem;    /* 36px ÷ 16 */
	--fs-card-tile-heading  : 2.4375rem;  /* 39px ÷ 16 */
	--fs-card-tile-body     : 1.25rem;    /* 20px ÷ 16 */
	--fs-card-tile-link     : 1.625rem;   /* 26px ÷ 16 */
	--fs-footer-col-heading : 1.8125rem;  /* 29px ÷ 16 */
	--fs-footer-col-body    : 1.125rem;   /* 18px ÷ 16 */
	--fs-credits            : 0.875rem;   /* 14px — smaller than body */
	--fs-faq-trigger   : 1.5rem;   /* 24px ÷ 16 */
	--fs-faq-body      : 1.25rem;    /* 20px ÷ 16 */
	--fs-split-heading : 2.6825rem;   /* 43px ÷ 16 */
	--fs-split-sub     : 1.5rem;   /* 24px ÷ 16 */
	--fs-split-body    : 1.125rem;    /* 18px ÷ 16 */
	--fs-split-link    : 1.8125rem;  /* 29px ÷ 16 */
	--fs-split-btn     : 1.5rem;     /* 24px ÷ 16 */
	--fs-h2            : 2.75rem;
	--fs-h3            : 2rem;
	--fs-body-lg       : 1.125rem;
	--fs-body          : 1rem;
	--fs-body-sm       : 0.875rem;
	--fs-label         : 0.75rem;
	--fs-tile-heading  : 1.875rem;   /* 30px ÷ 16 */
	--fs-tile-body     : 1.125rem;   /* 18px ÷ 16 */
	--fs-tile-link     : 1.3125rem;  /* 21px ÷ 16 */

	/* -------------------------------------------------------------------------
	   Typography — weights
	------------------------------------------------------------------------- */
	--fw-regular : 400;
	--fw-medium  : 500;
	--fw-bold    : 700;

	/* -------------------------------------------------------------------------
	   Typography — line heights
	------------------------------------------------------------------------- */
	--lh-tight   : 110%;
	--lh-normal  : 130%;
	--lh-relaxed : 150%;
	--lh-loose   : 162.5%;

	/* -------------------------------------------------------------------------
	   Typography — letter spacing
	   -2% in Figma = -0.02em
	------------------------------------------------------------------------- */
	--clr-bg-footer  : #F5F5F5; /* footer background */
	--ls-wide-pos    : 0.02em;  /* +2% letter spacing for CTA hero heading */
	--ls-snug    : -0.005em;  /* -0.5% */
	--ls-normal  : 0em;
	--ls-wide    : 0.05em;
	--ls-widest  : 0.1em;

	/* -------------------------------------------------------------------------
	   Layout
	------------------------------------------------------------------------- */
	--container-width  : 1280px;
	--container-gutter : 1.5rem;    /* min side padding on narrow viewports */
	--section-padding  : 2rem;      /* default vertical padding for blocks */

	/* -------------------------------------------------------------------------
	   Border radius
	------------------------------------------------------------------------- */
	--radius-sm   : 0.25rem;
	--radius-md   : 0.5rem;
	--radius-lg   : 0.75rem;
	--radius-card : 1rem;     /* 16px ÷ 16 — card corner radius */
	--radius-xl   : 1.5rem;
	--radius-pill : 100px;
	--radius-tile : 0.3125rem;  /* 5px ÷ 16 */

}

/* =============================================================================
   Shared utility classes
   Used across multiple blocks — do not modify per-block.
============================================================================= */

.container {
	width: 100%;
	max-width: var(--container-width) !important;
	margin-inline: auto;
	padding-inline: var(--container-gutter);
}