/*
 * Wealth Counsel Landing - design tokens
 *
 * The brand retune of the Modernist design system: navy accent, charcoal ink,
 * a crisp white ground, an orange kicker. theme.json publishes the subset the
 * site editor needs as --wp--preset--* variables; this file carries the full
 * tonal ramps and the layout constants the section styles read.
 *
 * Change a colour here and in theme.json's palette together - theme.json feeds
 * the editor's colour picker, this file feeds the stylesheet.
 */

:root {
	/* --- roles ------------------------------------------------------- */
	--wc-bg: #ffffff;
	--wc-surface: #f2f5f8;
	--wc-text: #1d2126;
	--wc-accent: #2a5a97;
	--wc-kicker: #fe6500;
	--wc-divider: color-mix(in srgb, #1d2126 30%, transparent);

	/* --- neutral ramp ------------------------------------------------- */
	--wc-neutral-100: #f7f8f9;
	--wc-neutral-200: #eceef1;
	--wc-neutral-300: #d9dde2;
	--wc-neutral-400: #b9bfc7;
	--wc-neutral-500: #969ea8;
	--wc-neutral-600: #767e88;
	--wc-neutral-700: #585f68;
	--wc-neutral-800: #3b414a;
	--wc-neutral-900: #262b32;

	/* --- accent ramp -------------------------------------------------- */
	--wc-accent-100: #eef3fa;
	--wc-accent-200: #d5e2f2;
	--wc-accent-300: #b0c8e5;
	--wc-accent-400: #7ba0cd;
	--wc-accent-500: #3f6faa;
	--wc-accent-600: #21497c;
	--wc-accent-700: #163a66;
	--wc-accent-800: #102a4b;
	--wc-accent-900: #0b1c33;

	/* --- ink at reduced strength -------------------------------------
	   The design sets body copy back from the heading ink rather than
	   switching to a grey, so the two stay in the same colour family. */
	--wc-ink-82: color-mix(in srgb, var(--wc-text) 82%, transparent);
	--wc-ink-78: color-mix(in srgb, var(--wc-text) 78%, transparent);
	--wc-ink-75: color-mix(in srgb, var(--wc-text) 75%, transparent);
	--wc-ink-70: color-mix(in srgb, var(--wc-text) 70%, transparent);

	/* --- layout ------------------------------------------------------- */
	--wc-gutter: clamp(20px, 5vw, 72px);
	--wc-max: 1200px;
	--wc-rule: 2px;

	/* Smallest comfortable touch target. Every link and control in the
	   header, the nav and the forms is held to it. */
	--wc-tap: 44px;

	/* --- section rhythm ----------------------------------------------
	   Vertical padding grows with the viewport so the page reads the same
	   on a phone and on a desktop without a breakpoint for each step. */
	--wc-pad-s: clamp(32px, 6vw, 44px);
	--wc-pad-m: clamp(44px, 9vw, 72px);
	--wc-pad-l: clamp(48px, 10vw, 84px);
	--wc-pad-xl: clamp(56px, 11vw, 96px);

	/* --- column gaps -------------------------------------------------- */
	--wc-gap-col: clamp(24px, 5vw, 96px);
	--wc-gap-col-tight: clamp(32px, 6vw, 88px);
	--wc-gap-row: clamp(24px, 4vw, 32px);

	/* --- elevation ---------------------------------------------------- */
	--wc-shadow-sm: 0 1px 2px color-mix(in srgb, #1d2126 14%, transparent);
	--wc-shadow-md: 0 3px 10px color-mix(in srgb, #1d2126 16%, transparent);
	--wc-shadow-lg: 0 12px 32px color-mix(in srgb, #1d2126 22%, transparent);
}

/*
 * color-mix() fallbacks for Safari < 16.2 and Firefox < 113. The ink-at-N%
 * values resolve to flat greys that read the same on the white ground.
 */
@supports not (color: color-mix(in srgb, #000 50%, transparent)) {
	:root {
		--wc-divider: #b9bfc7;
		--wc-ink-82: #3b414a;
		--wc-ink-78: #444a53;
		--wc-ink-75: #4a5159;
		--wc-ink-70: #585f68;
		--wc-shadow-sm: 0 1px 2px rgba(29, 33, 38, 0.14);
		--wc-shadow-md: 0 3px 10px rgba(29, 33, 38, 0.16);
		--wc-shadow-lg: 0 12px 32px rgba(29, 33, 38, 0.22);
	}
}