/*
 * Finer Touch Projects design tokens — APPROVED 2026-10-09, revised same day (01-design/brand.md):
 * MAIN = Near Black, White, Timber Brown, Muted Sage. ACCENTS = Warm Charcoal, Soft Timber Beige, Copper.
 * PAIRING SURFACES = Warm Off White (Timber text 6.0) and Deep Sage (Off White text 3.9: LARGE TEXT ONLY).
 * Colours and the three font families are READ FROM the Elementor Site Kit (Site Settings > Global Colours / Global Fonts):
 * see the `body` block after :root. The :root values are the same approved values and are the fallback when the Kit has
 * no value. Keep the --ft-* names: widgets and sections.css use them.
 *
 * Readability rules (WCAG AA, measured): text on White = Black / Charcoal / Timber only. Text on Black = White / Beige /
 * Copper / Sage. Primary button = White on Timber (6.7:1). Copper, Beige and Sage are NEVER text on White; Timber is NEVER
 * text on Black (fills/lines only).
 */

/* ---- Fonts: self-hosted variable woff2 (Fontsource 5.3.0, OFL), latin subset. No Google CDN. ---- */
@font-face { font-family: "Oswald"; font-style: normal; font-weight: 200 700; font-display: swap;
	src: url("../fonts/oswald-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Montserrat"; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 100 900; font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2-variations");
	unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
	/* ---- Brand colours (brand.md) ---------------------------------------- */
	--ft-color-black: #111111;     /* Near Black: dark sections, text on white */
	--ft-color-white: #FFFFFF;     /* White: light sections, text on dark */
	--ft-color-charcoal: #3B3733;  /* Warm Charcoal: body text on white, secondary dark surface */
	--ft-color-timber: #854E25;    /* Finer Timber Brown: primary button, links on white */
	--ft-color-timber-2: #6E3F1D;  /* timber pressed/hover (derived, darker: white on it 8.6:1) */
	--ft-color-beige: #C3A685;     /* Soft Timber Beige: labels / secondary text on dark */
	--ft-color-copper: #BF844D;    /* Copper Accent: accents on dark, focus ring */
	--ft-color-sage: #9AA985;      /* Muted Sage (MAIN): fills, rules, accent text on dark (7.5) */
	--ft-color-offwhite: #F4F1EB;  /* Warm Off White: alternate light surface (Timber text 6.0, Black 16.8) */
	--ft-color-deepsage: #6F7D5C;  /* Deep Sage: statement bands, Off White LARGE text only (3.9) */
	--ft-color-line: rgba(17, 17, 17, 0.12);          /* hairlines on light */
	--ft-color-line-dark: rgba(255, 255, 255, 0.16);  /* hairlines on dark */

	/* ---- Roles (what the shared base and widgets read) -------------------- */
	--ft-color-text: var(--ft-color-charcoal);
	--ft-color-heading: var(--ft-color-black);
	--ft-color-link: var(--ft-color-timber);
	--ft-color-accent: var(--ft-color-timber);        /* accent TEXT on light */
	--ft-color-accent-dark: var(--ft-color-copper);   /* accent TEXT on dark */
	--ft-color-label-dark: var(--ft-color-beige);

	/* Legacy names kept so the inherited base CSS keeps working; prefer the brand names above in new code. */
	--ft-color-deep: var(--ft-color-black);
	--ft-color-deep-2: #000000;
	--ft-color-lime: var(--ft-color-timber);
	--ft-color-lime-2: var(--ft-color-timber-2);
	--ft-color-grass: var(--ft-color-timber);
	--ft-color-ink: var(--ft-color-charcoal);
	--ft-color-pale: var(--ft-color-beige);
	--ft-color-mist: var(--ft-color-white);
	--ft-color-water: var(--ft-color-copper);

	/* ---- Type --------------------------------------------------------------- */
	--ft-font-display: "Oswald", "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
	--ft-font-sub: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ft-font-body: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	--ft-weight-body: 400;
	--ft-weight-strong: 600;
	--ft-weight-display: 600;
	--ft-weight-sub: 500;
	--ft-fs-display: clamp(46px, 6.4vw, 104px);  /* hero H1 (Oswald is condensed, so it can run large) */
	--ft-fs-display-sm: clamp(38px, 10.4vw, 56px); /* hero H1 on phones */
	--ft-fs-h2: clamp(34px, 4.2vw, 64px);
	--ft-fs-h3: clamp(22px, 1.9vw, 28px);
	--ft-fs-stat: clamp(48px, 5.5vw, 88px);      /* never bigger than the H1 */
	--ft-fs-lead: clamp(18px, 1.35vw, 21px);
	--ft-fs-body: 17px;
	--ft-fs-small: 14px;
	--ft-fs-label: 13px;                         /* Montserrat uppercase labels */
	--ft-lh-display: 1.02;
	--ft-lh-heading: 1.1;
	--ft-lh-body: 1.6;
	--ft-tracking-display: 0.01em;
	--ft-tracking-eyebrow: 0.16em;
	--ft-tracking-sub: 0.04em;

	/* ---- Space: 8px grid ---- */
	--ft-space-1: 4px;
	--ft-space-2: 8px;
	--ft-space-3: 12px;
	--ft-space-4: 16px;
	--ft-space-5: 24px;
	--ft-space-6: 32px;
	--ft-space-7: 48px;
	--ft-space-8: 64px;
	--ft-space-9: 96px;
	--ft-space-10: 120px;
	--ft-space-section: clamp(72px, 9vw, 160px);
	--ft-gap-wide: clamp(40px, 9vw, 180px);

	/* ---- Layout ---- */
	--ft-container: 1320px;
	--ft-gutter: clamp(20px, 4vw, 72px);
	--ft-measure: 62ch;
	--ft-header-h: 88px;
	--ft-footer-h: clamp(520px, 72svh, 760px); /* footer height on desktop: the CTA track is 100svh + this, so the footer rises over it 1:1 */

	/* ---- Shape (corners: to be settled in direction.md) ---- */
	--ft-radius-sm: 6px;
	--ft-radius: 12px;
	--ft-radius-lg: 24px;
	--ft-radius-pill: 999px;
	--ft-shadow: 0 2px 14px rgba(17, 17, 17, 0.08);
	--ft-shadow-raised: 0 12px 36px rgba(17, 17, 17, 0.16);
	--ft-focus: 0 0 0 3px var(--ft-color-copper);

	/* ---- Motion (look-and-feel.md §5, from the measured references) ---- */
	--ft-ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* block reveals (seventhhour) */
	--ft-ease-out: cubic-bezier(0.16, 1, 0.3, 1);      /* UI: burger, bars, menu */
	--ft-ease-roll: cubic-bezier(0.62, 0.04, 0.2, 1);  /* button label roll */
	--ft-ease-io: cubic-bezier(0.65, 0, 0.35, 1);
	--ft-dur-fast: 250ms;
	--ft-dur: 320ms;
	--ft-dur-mid: 420ms;
	--ft-dur-roll: 620ms;
	--ft-dur-reveal: 900ms;
	--ft-reveal-y: 28px;
	--ft-stagger: 80ms;
}

/* ---- Elementor Site Kit link ----
 * Elementor defines --e-global-* on the Kit's body class, not :root, so Kit-driven values are (re)declared on `body`,
 * with the approved value as fallback. Kit ids: primary = Near Black, secondary = Timber, text = Charcoal, accent = Muted Sage,
 * custom ftwhite / ftbeige / ftcopper / ftoffwhite / ftdeepsage; typography primary = Oswald (headings), secondary = Montserrat (subtext),
 * text = Inter (body), accent = Montserrat. Keep the fallbacks identical to :root.
 */
body {
	--ft-color-black: var(--e-global-color-primary, #111111);
	--ft-color-timber: var(--e-global-color-secondary, #854E25);
	--ft-color-charcoal: var(--e-global-color-text, #3B3733);
	--ft-color-sage: var(--e-global-color-accent, #9AA985);
	--ft-color-white: var(--e-global-color-ftwhite, #FFFFFF);
	--ft-color-beige: var(--e-global-color-ftbeige, #C3A685);
	--ft-color-copper: var(--e-global-color-ftcopper, #BF844D);
	--ft-color-offwhite: var(--e-global-color-ftoffwhite, #F4F1EB);
	--ft-color-deepsage: var(--e-global-color-ftdeepsage, #6F7D5C);

	--ft-color-text: var(--ft-color-charcoal);
	--ft-color-heading: var(--ft-color-black);
	--ft-color-link: var(--ft-color-timber);
	--ft-color-accent: var(--ft-color-timber);
	--ft-color-accent-dark: var(--ft-color-copper);
	--ft-color-label-dark: var(--ft-color-beige);
	--ft-color-deep: var(--ft-color-black);
	--ft-color-lime: var(--ft-color-timber);
	--ft-color-grass: var(--ft-color-timber);
	--ft-color-ink: var(--ft-color-charcoal);
	--ft-color-pale: var(--ft-color-beige);
	--ft-color-mist: var(--ft-color-white);
	--ft-color-water: var(--ft-color-copper);
	--ft-focus: 0 0 0 3px var(--ft-color-copper);

	--ft-font-display: var(--e-global-typography-primary-font-family, "Oswald"), "Arial Narrow", ui-sans-serif, system-ui, sans-serif;
	--ft-font-sub: var(--e-global-typography-secondary-font-family, "Montserrat"), ui-sans-serif, system-ui, sans-serif;
	--ft-font-body: var(--e-global-typography-text-font-family, "Inter"), ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
}

@media (max-width: 767px) {
	:root { --ft-reveal-y: 20px; --ft-header-h: 72px; }
}

@media (prefers-reduced-motion: reduce) {
	:root { --ft-dur-fast: 0ms; --ft-dur: 0ms; --ft-dur-mid: 0ms; --ft-dur-roll: 0ms; --ft-dur-reveal: 0ms; --ft-reveal-y: 0px; }
}