/* Canonical design tokens — the "Instrument" system. Defined once here; see the
   design handoff README (wp-content/themes/dekorado/design_handoff_dekorado_site/README.md)
   for the full rationale.

   Colours are oklch(), converted 1:1 from the handoff's spec hex (verified by
   round-tripping back to hex) rather than derived with relative-color syntax —
   these are the client's exact brand values, not values we're free to approximate.

   Cascade layer order for the whole theme is declared once, here, since this
   file loads first. */

@layer tokens, reset, base, components;

@layer tokens {
	:root {
		/* Colour */
		--void: oklch(15.82% 0.0072 258.37);
		--steel: oklch(20.71% 0.0117 254.09);
		--slate: oklch(25.65% 0.0167 248.48);
		--graphite: oklch(31.65% 0.0203 248.47);
		--paper: oklch(95.98% 0.0029 128.49);
		--card: oklch(100% 0 89.88);
		--line: oklch(88.57% 0.0058 128.53);
		--line-2: oklch(92.94% 0.0041 121.56);
		--ink: var(--void);
		--ink-2: oklch(43.76% 0.0188 248.26);
		--ink-3: oklch(62.86% 0.0160 244.84);
		--signal: oklch(56.59% 0.2154 26.41);
		--signal-d: oklch(47.15% 0.1792 26.26);
		--signal-l: oklch(63.63% 0.2109 23.59);
		--amber: oklch(54.72% 0.1173 69.14);
		--amber-l: oklch(78.37% 0.1587 72.99);
		--ok: oklch(56.26% 0.1204 158.54);
		--on-dark: oklch(100% 0 0);

		/* Type */
		--disp: "Golos Text", system-ui, sans-serif;
		--sans: "Golos Text", system-ui, sans-serif;
		--mark: "PT Serif", Georgia, serif;

		/* Fluid type scale — clamp() between the handoff's mobile and desktop
		   figures (README §Typography), interpolated over the same 390→1440
		   viewport range the two drawn breakpoints represent. */
		--text-h1: clamp(2.5rem, 1.717rem + 3.76cqi, 4.25rem); /* 40px → 68px */
		--text-h2: clamp(1.9375rem, 1.594rem + 1.62cqi, 3rem); /* 31px → 48px */
		--text-h3: clamp(1.25rem, 1.157rem + 0.44cqi, 1.3125rem); /* 20px → 21px */
		--text-lead: clamp(1rem, 0.923rem + 0.37cqi, 1.1875rem); /* 16px → 19px */

		/* Patterns */
		--hatch: repeating-linear-gradient(45deg, var(--signal) 0 12px, var(--void) 12px 24px);
		--plate: repeating-linear-gradient(45deg, var(--line-2) 0 10px, oklch(89.87% 0.0055 117.93) 10px 20px);
		--plate-d: repeating-linear-gradient(
			45deg,
			oklch(22.35% 0.0123 248.38) 0 10px,
			oklch(19.78% 0.0102 248.34) 10px 20px
		);

		/* Geometry & spacing */
		--radius: 0; /* border radius is 0 everywhere, on everything — load-bearing to the aesthetic */
		--container-max: 1440px;
		--container-pad: 40px;
		--container-pad-mobile: 20px;

		/* Control sizes */
		--header-h: 80px;
		--header-h-mobile: 64px;
		--utility-h: 42px;
	}
}