/* =========================================================================
   HNZ Constructions — design tokens

   Colours, type scale, spacing and layout custom properties. Loads first — every other file reads these.

   Enqueued by hnz_enqueue_assets() in inc/enqueue.php, which fixes the load
   order. Design tokens live in tokens.css.
   ========================================================================= */

/* Tokens =================================================================
   The design is essentially monochrome — colour comes from the photography.
   Adjust shared values here rather than repeating them in component files.
   ====================================================================== */

:root {
	/* Colour — --c-ink is the brand grey taken from the logo SVG (#333132).
	   The palette is monochrome; all colour comes from the photography. */
	--c-ink: #333132;
	--c-ink-muted: #6f6d6e;
	--c-surface: #e6e7e8;
	--c-surface-muted: #e6e7e8;
	--c-footer: #333132;
	--c-rule: #d9d8d6;

	/* Section dividers are full-strength ink, not the tinted --c-rule used for
	   component borders. All seven dividers on the Home export sample as
	   #333132 at every x, so they are the brand grey at 100%. */
	--c-divider: #333132;

	--c-overlay: rgb(0 0 0 / 45%);

	/* Typography — swap the family once the licensed font is in place */
	--font-display: "sofia-pro", system-ui, -apple-system, "Segoe UI", sans-serif;
	--font-body: "Spartan", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Sizes from Figma. The fs-500..800 ceilings are the measured desktop
	   values, reached at a 1440px viewport; the floors and slopes are
	   estimates so headings stay usable on small screens — Figma only
	   specifies the desktop artboard. */
	--fs-utility: 0.6875rem;   /* 11px — top bar, nav, tile location */
	--fs-100: 0.75rem;         /* 12px — small labels, footer */
	--fs-200: 0.8125rem;       /* 13px — body small */
	--fs-300: 0.8125rem;       /* 13px — body (Figma) */
	--fs-400: 1.125rem;        /* 18px */
	--fs-500: clamp(1.25rem, 1.1rem + 0.45vw, 1.5rem);      /* 24px — h4, links */
	--fs-600: clamp(1.5rem, 1.15rem + 1.5vw, 2.5rem);       /* 40px — h2 */
	--fs-700: clamp(1.875rem, 1.3rem + 2.03vw, 3.125rem);   /* 50px — h3 */
	--fs-800: clamp(2.25rem, 1.4rem + 5.2vw, 6.0625rem);    /* 97px — h1/hero */

	--lh-tight: 1;      /* 100% — all headings */
	--lh-snug: 1.25;
	--lh-body: 1.59;    /* 159% — body copy */

	--ls-tight: -0.03em; /* -3% — headings and body */
	--ls-wide: 0.14em;
	--ls-nav: 0.1em;

	--fw-regular: 400;
	--fw-medium: 500;  /* Body default. */
	--fw-bold: 700;
	--fw-display: 800; /* Headings and text links. Not in the Typekit kit
	                      yet — browsers synthesise it until Sofia Pro
	                      ExtraBold is added there. */

	/* Spacing */
	--sp-1: 0.25rem;  /* 4px */
	--sp-2: 0.5rem;   /* 8px */
	--sp-3: 0.75rem;  /* 12px */
	--sp-4: 1rem;     /* 16px */
	--sp-5: 1.5rem;   /* 24px */
	--sp-6: 2rem;     /* 32px */
	--sp-7: 3rem;     /* 48px */
	--sp-8: 4rem;     /* 64px */
	--sp-9: 5.5rem;   /* 88px */
	--sp-10: 7rem;    /* 112px */

	/* Layout */
	--container: 1440px;
	/* The inner content column: project gallery and caption, the home
	   mosaic and its header, and the V2 contact block and its heading all
	   share this edge. Measured off the single project gallery. */
	--inner-container: 1067px;
	--container-narrow: 760px;

	/* Horizontal padding inside .container. Stepped up at the breakpoints
	   below: 20px mobile / 30px tablet / 40px desktop. */
	--gutter: 1.25rem; /* 20px */

	/* The design's offset geometry: heroes and the top bar are inset from the
	   left, leaving the watermark margin where the logo sits. The right inset
	   leaves the margin the header's social icons sit in.

	   Measured off Home.png (1442px = the 1440px artboard): the hero image
	   spans x 359–1262, i.e. 359/1440 = 24.93% in from the left and
	   (1440-1263)/1440 = 12.29% in from the right. The utility bar shares the
	   left inset but runs to the viewport edge — see header.css. */
	--hero-inset-left: 24.93%;
	--hero-inset-right: 12.29%;

	/* Height of the header row. The first hero is pulled up by this so the nav
	   overlays the image, as in the design.

	   Measured: the utility bar ends at y 27 and the header's bottom hairline
	   sits at y 129, so the row is 101px. (The hero's top edge lands at y 28
	   whatever this value is, because the pull-up cancels it — this only fixes
	   where the hairline falls.) */
	--header-height: 101px;

	--transition: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	/* Vertical padding inside a .section.

	   Measured off Home.png, not guessed: the gap from each of the seven
	   section dividers to the first ink below it is 41–51px, and from the last
	   ink to the next divider 40–43px. 44px sits in the middle of both. The
	   previous --sp-9 (88px) was double the design. */
	--section-py: 2.75rem; /* 44px */

	/* The long arrow beside text links, as a mask so it takes currentColor.
	   Traced off the Home hero CTA: 32 x 22, a 19px shaft 2.2px thick, a 6px
	   gap, then a head detached from the shaft whose arms leave vertically and
	   sweep into the vertex — two quadratic curves, not a straight chevron
	   (97% pixel overlap with the export vs 43% for a chevron).
	   Keep in sync with hnz_arrow() in inc/template-tags.php. */
	--arrow-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 22'%3E%3Cpath d='M0 11H18.5M21 .5Q21 10 31.5 11Q21 12 21 21.5' fill='none' stroke='%23000' stroke-width='2.2'/%3E%3C/svg%3E");
}

/* Tablet */
@media (min-width: 48em) {
	:root {
		--gutter: 1.875rem; /* 30px */
	}
}

/* Desktop */
@media (min-width: 75em) {
	:root {
		--gutter: 2.5rem; /* 40px */
	}
}