/*
 * Custom Cut Joinery — design tokens.
 * A calm trade-merchant look in the logo's own colours: slate, sand, white.
 * Condensed sentence-case headings over Poppins body text. Sand is a fill and
 * rule colour, never body text on white (it fails contrast).
 */

@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Barlow Condensed"; src: url("../fonts/barlow-condensed-700-latin.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-400-latin.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-500-latin.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Poppins"; src: url("../fonts/poppins-600-latin.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
	/* Colour: slate and sand sampled from the logo (confirm against the original artwork) */
	--slate: #636c79;         /* logo background: header, footer */
	--slate-dark: #2f3640;    /* text, headings, footer base */
	--sand: #c8b08e;          /* logo cabinet: accent fills and rules */
	--sand-light: #eee6d8;    /* soft panels */
	--paper: #ffffff;
	--panel: #f6f4f0;
	--rule: #e3e0da;
	--field: #b9b5ad;
	--text: #2f3640;
	--text-2: #5b626d;
	--warn: #b3261e;
	--focus: #8a6f48;         /* focus ring: 4.6:1 on white */

	/* Legacy names used across the stylesheets, mapped onto the set above */
	--logo-slate: var(--slate);
	--util: var(--slate-dark);
	--brand: var(--slate-dark);
	--brand-dark: #1f252d;
	--brand-2: var(--slate);
	--sand-deep: var(--focus);
	--strip: var(--panel);
	--link: var(--slate-dark);
	--star: var(--sand);
	--ink: var(--slate-dark);  /* drawing linework */
	--mdf: var(--sand);        /* drawing part faces */

	/* Type */
	--font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Poppins", "Helvetica Neue", Arial, sans-serif;

	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-h4: 1.375rem;
	--fs-h3: clamp(1.625rem, 1.3rem + 1vw, 2.125rem);
	--fs-h2: clamp(2rem, 1.5rem + 1.6vw, 2.75rem);
	--fs-h1: clamp(2.5rem, 1.7rem + 2.6vw, 3.75rem);

	--lh-body: 1.65;
	--lh-head: 1.05;

	/* Shape */
	--r-btn: 4px;
	--r-field: 4px;
	--r-card: 6px;
	--shadow-card: 0 1px 3px rgba(31, 37, 45, 0.08);

	/* Space */
	--s1: 0.25rem;
	--s2: 0.5rem;
	--s3: 0.75rem;
	--s4: 1rem;
	--s5: 1.5rem;
	--s6: 2rem;
	--s7: 3rem;
	--s8: 4.5rem;
	--s9: 6rem;

	/* Layout */
	--page-max: 77.5rem;
	--gutter: clamp(1rem, 0.5rem + 2vw, 2rem);
	--measure: 70ch;

	--ease-out: cubic-bezier(0.16, 1, 0.3, 1);
}