/**
 * Design tokens extracted verbatim from the live Elementor Kit ("Kit Styles: Advofa",
 * post ID 11 — the site's active global kit). These are the exact values Elementor
 * was using; changing them changes the visual output, so treat this file as the
 * single source of truth and do not hand-tune values elsewhere.
 */

:root {
	/* Kit > Global Colors: System */
	--plf-color-primary: #2E6E96;   /* "Main color" — buttons, links-on-hover, accents */
	--plf-color-secondary: #1C3A59; /* "Blue" — body text color, h1/h2, dark backgrounds */
	--plf-color-accent: #FFFFFF;    /* "White" — text on dark/primary backgrounds */
	--plf-color-text: #C2C2C2;      /* "Text white" — muted text on dark backgrounds */

	/* Kit > Global Colors: Custom */
	--plf-color-text-black: #4B535D;
	--plf-color-border: #90909073;   /* ~45% alpha */
	--plf-color-bg-cream: #FAF6F1;
	--plf-color-transparent: #D1B06B00;
	--plf-color-yellow: #F4E06E;     /* hero headline highlight span */

	/* Kit > Global Fonts */
	--plf-font-display: 'Cormorant Garamond', serif; /* headings */
	--plf-font-body: 'Outfit', sans-serif;            /* body copy, buttons, menu */
	--plf-font-alt: 'Inter', sans-serif;               /* secondary body copy variants */

	/* Kit > Layout */
	--plf-container-width: 1250px;
	--plf-breakpoint-md: 768px;
	--plf-breakpoint-lg: 1025px;

	/* Theme-added (not from the Kit): the minimum horizontal breathing room
	   between a centred wrapper and the viewport edge. Elementor supplied this
	   implicitly through its own section padding; the port has to state it,
	   otherwise wrappers sit flush to the edge on every screen between
	   --plf-breakpoint-lg and --plf-container-width.

	   The scale: 30px from --plf-breakpoint-lg up, 20px on tablet, 10px on
	   phones. Only the first is new — the lower two are the values the theme
	   already shipped, so tablet and phone layouts are untouched. The token is
	   redefined per breakpoint at the foot of this file, which steps every
	   consumer (.container, the header bars, the footer rows) from one place. */
	--plf-gutter: 30px;
	--plf-gutter-mobile: 10px;

	/* Kit > Buttons (global default button style) */
	--plf-button-radius: 0px;
	--plf-button-padding-y: 15px;
	--plf-button-padding-x: 25px;
	--plf-button-bg: var(--plf-color-primary);
	--plf-button-bg-hover: var(--plf-color-secondary);
	--plf-button-color: var(--plf-color-accent);

	/* Kit > Typography presets (name kept close to the Kit's own labels) */
	--plf-h1-h2-size: 45px;
	--plf-h1-h2-size-mobile: 32px;
	--plf-h1-h2-weight: 700;
	--plf-h1-h2-line-height: 1.2em;

	--plf-h3-size: 35px;
	--plf-h3-size-mobile: 30px;

	--plf-h4-size: 26px;
	--plf-h4-size-mobile: 24px;

	--plf-kicker-size: 18px;
	--plf-kicker-size-mobile: 16px;
	--plf-kicker-weight: 600;

	--plf-hero-size: 58px;             /* hero heading base (desktop) */
	--plf-hero-highlight-size: 65px;   /* the highlighted word ("Compensation") on desktop */
	--plf-hero-size-mobile: 45px;

	--plf-body-size: 18px;
	--plf-body-size-mobile: 16px;
	--plf-body-line-height: 1.4em;
}

/**
 * Gutter scale. Tablet and below stay on the 20px the theme already used, so
 * only the laptop band — the one that used to render flush to the edge — picks
 * up the wider 30px. .container narrows further to --plf-gutter-mobile at 767px
 * (see base.css); the header and footer wrappers hold 20px there, matching the
 * padding they carried before.
 */
@media (max-width: 1024px) {
	:root {
		--plf-gutter: 20px;
	}
}