/*
 * Static design tokens.
 *
 * Brand-dependent values (--sk-accent, --sk-support, --sk-division-*) are
 * injected per install by inc/brand.php, so they are referenced here but never
 * declared. The brand-guide tint steps are derived with color-mix() rather than
 * hardcoded, so a palette change is a single-value edit.
 */

:root {
	/* Primary */
	--sk-blue: #007cba;
	--sk-green: #76bc21;

	/* Secondary / callout */
	--sk-orange: #ee7623;
	--sk-black: #231f20;
	--sk-gray: #6d6e71;

	/* Body-copy gray from the design comps; darker than the brand-guide gray. */
	--sk-gray-copy: #54585b;
	--sk-gray-light: #f1f2f2;

	/* Warm gray the comps wash the light page header down to, off the neutral
	   --sk-gray-light so the band reads as paper rather than as a panel. */

	--sk-gray-warm: #e5e2dd;
	--sk-white: #fff;

	/* Tertiary, for categorical use only */
	--sk-teal: #00a58f;
	--sk-yellow: #d4cd40;
	--sk-plum: #823d66;
	--sk-navy: #004b6e;

	/* Brand-guide tint steps. */
	--sk-accent-75: color-mix(in srgb, var(--sk-accent) 75%, #fff);
	--sk-accent-50: color-mix(in srgb, var(--sk-accent) 50%, #fff);
	--sk-accent-25: color-mix(in srgb, var(--sk-accent) 25%, #fff);
	--sk-accent-dark: color-mix(in srgb, var(--sk-accent) 82%, #000);

	/*
	 * DIN 2014, served from Adobe Fonts. The kit provides only 400, 400i, 700,
	 * and 700i, so never specify 500 or 600 anywhere: the browser would either
	 * snap to the nearest face or synthesize a faux bold that looks wrong
	 * against the real one.
	 */

	--sk-font-display: din-2014, "Helvetica Neue", helvetica, arial, sans-serif;
	--sk-font-body: din-2014, "Helvetica Neue", helvetica, arial, sans-serif;

	/* Reserved for the rare condensed setting; the kit has 400 and 700 only. */
	--sk-font-narrow: din-2014-narrow, din-2014, "Helvetica Neue", helvetica, arial, sans-serif;

	/*
	 * Layout. One container measure for the whole site, so the header, the
	 * footer, and every section share the same left and right edges. Anything
	 * needing a narrower measure caps itself in ch, which keeps the limit tied
	 * to its own type size.
	 */

	--sk-container: 1440px;
	--sk-gutter: clamp(1.25rem, 4vw, 3rem);

	/* The brand's recurring diagonal, used by the header chevron and card washes. */
	--sk-angle: 26deg;

	/*
	 * The same diagonal as artwork, shared by the testimonial band and the pillar
	 * cards. The file lives in assets/images/; this path is relative to assets/css/base/.
	 */

	--sk-angle-wash: url("../../images/angle-bg.jpg");

	/*
	 * Page header washes. Both run left to right so the copy, which sits on the
	 * left, always lands on the dark end.
	 *
	 * The dark one interpolates in oklab: mixing black to navy in sRGB dips
	 * through a muddy blue-gray around the midpoint, which is the one part of
	 * the ramp the comp spends the most width on. Teal is placed past the right
	 * edge because the comp never reaches it, only leans toward it. Anything
	 * that cannot parse the gradient falls back to the solid colour underneath,
	 * so the reversed copy stays legible either way.
	 */

	--sk-page-header-light: linear-gradient(90deg, var(--sk-gray-warm) 0%, var(--sk-white) 100%);
	--sk-page-header-dark: linear-gradient(
		90deg in oklab,
		var(--sk-black) 0%,
		var(--sk-navy) 78%,
		var(--sk-teal) 108%
	);

	--sk-transition: 240ms cubic-bezier(0.4, 0, 0.2, 1);
}