/* ---------------------------------------------------------------------------
   Design tokens.

   This is the whole visual identity in one file. Change these values and the
   site rebrands: nothing else hardcodes a colour, a typeface or a spacing step.
   The two brand colours are sampled from the Gusto logo artwork.
   --------------------------------------------------------------------------- */

:root {
	/* Colour */
	--ink:            #12100F;   /* warm near-black, the dark sections */
	--ink-raised:     #1D1A18;   /* panels on dark */
	--ink-line:       #2E2A26;   /* hairlines on dark */
	--paper:          #F4F2EE;   /* warm off-white, the light sections */
	--paper-raised:   #FFFFFF;
	--paper-line:     #DFDBD4;
	--brass:          #B20C20;   /* exact red from the logo */
	--brass-deep:     #ef2f46;   /* old color #E0B900   */
	--steel:          #8C8781;   /* secondary text on dark */
	--slate:          #5A554F;   /* secondary text on light */

	/* Type */
	--font-display:   "Archivo", "Arial Narrow", system-ui, sans-serif;
	--font-body:      "Archivo", system-ui, -apple-system, sans-serif;
	--font-mono:      "IBM Plex Mono", ui-monospace, "SFMono-Regular", monospace;

	--fs-display:     clamp(2.15rem, 4.2vw, 3.5rem);
	--fs-h1:          clamp(2.1rem, 4.4vw, 3.3rem);
	--fs-h2:          clamp(1.6rem, 2.9vw, 2.3rem);
	--fs-h3:          1.2rem;
	--fs-body:        1.02rem;
	--fs-small:       0.86rem;
	--fs-micro:       0.74rem;

	/* Space */
	--gutter:         clamp(20px, 4.5vw, 56px);
	--section-y:      clamp(56px, 8vw, 112px);
	--container:      1280px;

	/* Shape: locks are machined, so corners stay tight */
	--radius:         3px;
	--radius-lg:      6px;

	/* Motion */
	--ease:           cubic-bezier(0.22, 0.61, 0.36, 1);
	--fast:           140ms;
	--slow:           420ms;
}