/**
 * Kerrigan — Design tokens
 * Source: pages/homepage/figma/section-specs.json + assets/figma/tokens-global.json
 * Every value here is taken from the Figma extraction. Do not invent values.
 */

:root {
	/* ---------------------------------------------------------------
	 * Colour palette
	 * Role + hue naming. Never hardcode a hex in a block stylesheet.
	 * --------------------------------------------------------------- */
	--primary-green: #01963A; /* brand green - CTAs, accents, links */
	--primary-green-rgb: 1, 150, 58; /* channels, so alpha variants avoid a second hex */
	--primary-black: #010101; /* footer bg, darkest text */
	--primary-black-rgb: 1, 1, 1; /* channels, so alpha variants avoid a second hex */
	--near-black: #121212;
	--near-black-rgb: 18, 18, 18; /* channels, so alpha variants avoid a second hex */ /* headings */
	--white: #FFFFFF;
	--white-rgb: 255, 255, 255; /* channels, so alpha variants avoid a second hex */
	--pale-green: #F2FAF5; /* light section backgrounds */
	--pale-green-rgb: 242, 250, 245;
	--alert-red: #F21213; /* risk-list marks — Metal Roofs s6 */
	--mid-green: #CCDBD2; /* borders, dividers, muted fills */
	--body-grey: #373E45; /* body copy */
	--strip-grey: #333333; /* top strip bg */
	--overlay-green: #1A3412; /* hero gradient overlay */
	--overlay-green-rgb: 26, 52, 18;
	--star-amber: #FBB102;
	--arrow-ring: #FBFAF8; /* the 3px OUTSIDE stroke on the slider arrows */
	--pager-dot: #768571; /* inactive slider pager dot */
	--error-red: #E5484D; /* form validation - legible on white and on the dark hero */ /* rating stars */
	--border-grey: #DBDBDB; /* accordion item border - sampled from the design */
	--footer-text: #CAD4C7; /* footer body copy - read off the Footer component in
	 * the .fig, where every text node is #CAD4C7. --mid-green (#CCDBD2) had been
	 * standing in for it; that is a different design colour (borders and fills). */

	/* Added during the homepage build - see report.
	 * --ink-navy   : "Our Services" heading (section 07), Figma #101828.
	 * --muted-green: footer social icon buttons, Figma #557B4A.
	 * --panel-black: footer "Contact Us" panel, sampled #080808 on #010101. */
	--ink-navy: #101828;
	--muted-green: #557B4A;
	--panel-black: #080808;

	/* Hero paint stack. Figma order is bottom-most first:
	 * video/poster base UNDER a 50% black solid. Never collapsed to one colour. */
	--hero-overlay-opacity: 0.5;

	/* ---------------------------------------------------------------
	 * Typography
	 * --------------------------------------------------------------- */
	--font-heading: "Anek Devanagari", system-ui, sans-serif;
	--font-body: "Roboto", system-ui, sans-serif;
	--font-accent: "Open Sans", system-ui, sans-serif;

	/* Fluid type. vw term computed against the 1920px design canvas:
	 * vw = (figma_px / 1920) * 100. Max term is the Figma desktop size. */
	--fs-84: clamp(32px, 5.753vw, 84px); /* 84/1460 - held to 1460, floor 32 at 556 */
	--fs-64: clamp(28px, 4.384vw, 64px); /* 64/1460 - held to 1460, floor 28 at 639 */
	--fs-36: clamp(24px, 2.466vw, 36px); /* developer-set floor 24; holds 36 to 1460 */
	--fs-30: clamp(22px, 2.300vw, 30px); /* developer-set: holds 30 to 1304, floor 22 */
	--fs-29: clamp(20px, 1.986vw, 29px); /* 29/1460 - held to 1460, floor 20 at 1007 */
	--fs-24: clamp(18px, 1.644vw, 24px); /* 24/1460 - held to 1460, floor 18 at 1095 */
	/* Holds its full 22px across every desktop width, not just at 1920. The
	 * 1920-basis coefficient (22/1920 = 1.146vw) reached 22 only AT 1920 and hit
	 * the 17px floor from 1483 down, so the accordion question, the service-tab
	 * chips and the review name all dropped to 17 on any normal desktop.
	 * 1.833vw = 22/1200, so 22 holds to 1200 and the taper to 17 happens across
	 * tablet (17 at 927). Unchanged at 1920, so band heights are unaffected. */
	/* NOTE ON THE BASIS. project-config.json's font_size_strategy computes the vw
	 * term as figma_px / 1920, which reaches the design size only AT 1920 and so
	 * starts shrinking immediately below it — --fs-16 was 14px from 1681 down and
	 * --fs-84 was 64px at 1460.
	 *
	 * Nothing shrinks above 1460 now. The display sizes are on a 1460 basis
	 * (figma_px / 1460), so each holds its design size down to 1460 and tapers
	 * from there. The body sizes below are on a 1200 basis, which holds them
	 * further still — past 1460 and down to 1200 — which is deliberate: body copy
	 * barely moves, per the project's own font_size_strategy.
	 *
	 * Every size is clamped at its design maximum, so 1920 is unchanged by any of
	 * this and the measured band heights still hold.
	 *
	 * The FLOORS were raised by the developer on 2026-08-21 (20/18 -> 17, 16 -> 15,
	 * 14 -> 13, 36 -> 24, 30 -> 22), so project-config's font_size_strategy
	 * body_floor_px: 16 no longer describes them.
	 */
	--fs-22: clamp(17px, 1.833vw, 22px);
	/* Body copy holds its full 20px across every desktop width, not just at
	 * 1920. The 1920-basis coefficient (20/1920 = 1.042vw) reaches 20px only AT
	 * 1920 and hits the 16px floor from 1536 down, so every small desktop was
	 * rendering body copy at 16. 1.667vw = 20/1200, so 20px holds down to 1200
	 * and the taper to the 16px floor happens across tablet instead (16 at 960).
	 * Unchanged at 1920, so the measured band heights are unaffected. */
	--fs-20: clamp(17px, 1.667vw, 20px);
	--fs-18: clamp(17px, 1.500vw, 18px); /* 18/1200 - held to 1200, developer-set floor 17 */
	--fs-16: clamp(15px, 1.333vw, 16px); /* 16/1200 - held to 1200, developer-set floor 15 */
	/* Careers upload row only — the design's smallest type. Floored at the
	 * project's 12px absolute minimum. */
	--fs-14: clamp(13px, 1.167vw, 14px); /* 14/1200 - held to 1200, developer-set floor 13 */

	/* Unitless line heights so they track the clamped size. */
	--lh-tight: 1; /* 84/84, 24/100%, 16/100% */
	--lh-heading: 1.125; /* 64/72 */
	--lh-36: 1.167; /* 36/42 */
	--lh-30: 1.2; /* 30/36 */
	--lh-24-28: 1.167; /* 24/28 - the icon-card title box in feature_columns */
	--lh-22: 1.227; /* 22/27 - homepage FAQ question */
	--lh-22-34: 1.545; /* 22/34 - the closing FAQ question, whose rows are 100 not 85 */
	--lh-body: 1.6; /* 20/32 */
	--lh-18-20: 1.111; /* 18/20 - button labels */
	--lh-18-30: 1.667; /* 18/30 - card body */

	--ls-wide: 0.05em; /* Figma "5%" on bold uppercase button labels */

	/* ---------------------------------------------------------------
	 * Layout
	 * --------------------------------------------------------------- */
	--container-max: 1440px; /* Figma content width */
	--container-pad: 60px; /* desktop */
	--grid-gutter: 30px;

	/* Long-form reading measure — the blog article column. Not a Figma value:
	 * there is no design for the blog. 20px Roboto averages close to 10px per
	 * character, so the 1440 container would run ~144 characters a line against
	 * the 60-80 that reads comfortably; 800 lands at ~80. Used by
	 * css/common/blog-single.css. */
	--blog-measure: 800px;

	/* Section vertical rhythm */
	--section-rhythm: 120px;

	/* ---------------------------------------------------------------
	 * Spacing scale (Figma auto-layout values)
	 * --------------------------------------------------------------- */
	--space-10: 10px;
	--space-12: 12px;
	--space-15: 15px;
	--space-16: 16px;
	--space-20: 20px;
	--space-25: 25px;
	--space-30: 30px;
	--space-40: 40px;
	--space-48: 48px;
	--space-60: 60px;
	--space-72: 72px;
	--space-88: 88px;
	--space-120: 120px;

	/* ---------------------------------------------------------------
	 * Radii (Figma: 8, 25, 30). Solid CTAs are square (0) in this design.
	 * --------------------------------------------------------------- */
	--radius-0: 0;
	--radius-8: 8px;
	--radius-25: 25px;
	--radius-30: 30px;

	/* ---------------------------------------------------------------
	 * Motion
	 * --------------------------------------------------------------- */
	--transition: all 0.3s ease;

	/* Global chrome */
	--header-height: 137px;

	/* ---------------------------------------------------------------
	 * Slider arrows
	 *
	 * Every carousel's prev/next disc is drawn from these — the theme's own
	 * Slick arrows and the Google-reviews plugin's alike. See
	 * css/components/slider-arrows.css; change an arrow here, not in a block
	 * stylesheet.
	 * --------------------------------------------------------------- */
	--slider-arrow-size: 50px;
	--slider-arrow-glyph: 16px; /* rendered height of the chevron */
	--slider-arrow-bg: var(--primary-green);
	--slider-arrow-color: var(--white);
	--slider-arrow-bg-hover: var(--overlay-green);
	--slider-arrow-color-hover: var(--white);
	--slider-arrow-ring: 3px; /* Figma strokes the disc 3px OUTSIDE */
	--slider-arrow-ring-color: var(--arrow-ring);

	/* How far outside the card band the disc centre sits. Below 1600 the
	 * container is no longer 80px off the viewport, so the discs come inside
	 * and the band is inset by --slider-arrow-gutter to keep them off the
	 * cards. Both sliders step at the same width. */
	--slider-arrow-offset: 80px;
	--slider-arrow-gutter: 65px; /* the 50px disc plus 15 clear */
}

/* iPad — includes landscape at 1024px. */
@media (max-width: 1199px) {

	:root {
		--container-pad: 30px;
	}
}

/* 991 is retained for layout work (column stacking, grid, nav) but the
 * container padding steps skip it, going 60 -> 30 at 1199 and 30 -> 20 at 767. */
@media (max-width: 991px) {

	:root {
		--section-rhythm: 80px;
	}
}

/* Mobile */
@media (max-width: 767px) {

	:root {
		--container-pad: 20px;
		--section-rhythm: 60px;
		--header-height: 90px;
	}
}