/* =============================================================
   Wilgin Holdings — Design Tokens
   Brand pulled from the logo; neutrals + scales derived.
   ============================================================= */
:root {
	/* ---- Brand (from logo) ---- */
	--wg-blue: #0158E3;
	--wg-blue-hover: #0F4FC4;
	--wg-blue-active: #0A3E9E;
	--wg-blue-tint: #EAF1FE;
	--wg-white: #FFFFFF;
	--wg-black: #000000;

	/* ---- Neutrals / surfaces (derived) ---- */
	--wg-navy: #142745;    /* dark sections — softer than pure black */
	--wg-ink: #14181F;     /* body text on light */
	--wg-muted: #5F5E5F;   /* secondary text */
	--wg-border: #E2E5EA;
	--wg-surface: #F5F6F8; /* light section background */

	/* ---- Semantic aliases ---- */
	--color-bg: var(--wg-white);
	--color-text: var(--wg-ink);
	--color-text-muted: var(--wg-muted);
	--color-accent: var(--wg-blue);
	--color-accent-contrast: var(--wg-white); /* white on blue ~6:1 (AA) */
	--color-dark-bg: var(--wg-navy);
	--color-border: var(--wg-border);

	/* ---- Type ---- */
	--font-display: "Saira", "Inter", system-ui, sans-serif;
	--font-body: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

	/* Fluid type scale (clamp: min / preferred / max) */
	--step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem);
	--step-0:  clamp(1.00rem, 0.96rem + 0.20vw, 1.10rem);
	--step-1:  clamp(1.20rem, 1.13rem + 0.35vw, 1.40rem);
	--step-2:  clamp(1.44rem, 1.32rem + 0.60vw, 1.80rem);
	--step-3:  clamp(1.73rem, 1.54rem + 0.95vw, 2.30rem);
	--step-4:  clamp(2.07rem, 1.78rem + 1.45vw, 2.95rem);
	--step-5:  clamp(2.49rem, 2.06rem + 2.15vw, 3.80rem);

	--weight-body: 400;
	--weight-medium: 500;
	--weight-semibold: 600;
	--weight-bold: 700;
	--weight-display: 800;
	--leading-tight: 1.08;
	--leading-snug: 1.28;
	--leading-body: 1.6;
	--tracking-eyebrow: 0.14em;

	/* ---- Spacing scale ---- */
	--space-3xs: 0.25rem;
	--space-2xs: 0.5rem;
	--space-xs: 0.75rem;
	--space-s: 1rem;
	--space-m: 1.5rem;
	--space-l: 2.5rem;
	--space-xl: 4rem;
	--space-2xl: 6rem;
	--space-3xl: 8rem;

	/* ---- Layout ---- */
	--container-max: 1200px;
	--container-pad: clamp(1rem, 5vw, 2.5rem);

	/* ---- Radius / borders ---- */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 14px;
	--border-hair: 1px solid var(--color-border);

	/* ---- Elevation ---- */
	--shadow-sm: 0 1px 2px rgba(20, 24, 31, 0.08);
	--shadow-md: 0 6px 20px rgba(20, 24, 31, 0.10);
	--shadow-blue: 0 8px 24px rgba(1, 88, 227, 0.28);

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