/**
 * YSF Advisory — design tokens.
 *
 * Every token is declared on :root and nowhere else. That is deliberate:
 * in the React build the font variables were set on <body> while
 * --font-display was declared at :root, so :root could not see them, the
 * declaration became invalid, and EVERY heading on the site silently fell
 * back to the system stack. Keep declaration and definition on the same
 * element.
 *
 * Dark mode is a neutral charcoal scheme, not an inverted navy one.
 */

:root {
	/* --- brand ---------------------------------------------------------- */
	--ysf-navy: #041d4f;
	--ysf-royal: #002f9b;
	--ysf-royal-400: #4477e8;
	--ysf-royal-300: #6e93e8;

	/* --- light surfaces -------------------------------------------------- */
	--ysf-white: #ffffff;
	--ysf-off-white: #fafaf7;
	--ysf-soft-gray: #f3f3f3;

	/* --- dark surfaces --------------------------------------------------- */
	--ysf-char-900: #0c0e11;
	--ysf-char-800: #101114;
	--ysf-char-700: #181a1e;
	--ysf-char-600: #202227;

	/* --- typography ------------------------------------------------------ */
	--ysf-font-display: 'Inter Tight', system-ui, sans-serif;
	--ysf-font-body: 'Poppins', system-ui, sans-serif;

	/* --- layout ---------------------------------------------------------- */
	--ysf-shell-max: 90rem; /* 1440px */
	--ysf-gutter: clamp(1rem, 4vw, 5rem);
	--ysf-section-y: clamp(4.5rem, 10vh, 9.5rem);
	--ysf-header-h: 5.5rem;

	/* --- motion ---------------------------------------------------------- */
	--ysf-ease-brand: cubic-bezier(0.22, 1, 0.36, 1);
	--ysf-ease-brand-in: cubic-bezier(0.64, 0, 0.78, 0);
}

/* --- light theme ------------------------------------------------------- */
:root,
:root[data-theme='light'] {
	--ysf-surface: var(--ysf-white);
	--ysf-surface-warm: var(--ysf-off-white);
	--ysf-surface-sunken: var(--ysf-soft-gray);
	--ysf-surface-veil: rgba(255, 255, 255, 0.86);

	--ysf-ink: #20242b;
	--ysf-ink-heading: var(--ysf-navy);
	--ysf-ink-muted: #5b6271;
	--ysf-ink-faint: #666c7a; /* 4.8:1 on white; the brand's #8a909d is 3.6:1 and fails AA for the 10px labels set in it */

	--ysf-line: rgba(4, 29, 79, 0.12);
	--ysf-line-strong: rgba(4, 29, 79, 0.24);
	--ysf-line-soft: rgba(4, 29, 79, 0.07);

	--ysf-accent: var(--ysf-royal);
	--ysf-accent-solid: var(--ysf-royal);
	--ysf-accent-solid-ink: var(--ysf-white);
}

/* --- dark theme -------------------------------------------------------- */
:root[data-theme='dark'] {
	--ysf-surface: var(--ysf-char-800);
	--ysf-surface-warm: var(--ysf-char-700);
	--ysf-surface-sunken: var(--ysf-char-900);
	--ysf-surface-veil: rgba(16, 17, 20, 0.86);

	--ysf-ink: #f5f5f3;
	--ysf-ink-heading: #f5f5f3;
	--ysf-ink-muted: #a7abb4;
	--ysf-ink-faint: #8b909a; /* 5.6:1 on #101114; #767a83 was 4.4:1 */

	--ysf-line: rgba(245, 245, 243, 0.14);
	--ysf-line-strong: rgba(245, 245, 243, 0.26);
	--ysf-line-soft: rgba(245, 245, 243, 0.08);

	--ysf-accent: #8aa9f2; /* the original's dark accent; royal-400 is 4.2:1 on the warm surface */
	--ysf-accent-solid: var(--ysf-royal);
	--ysf-accent-solid-ink: var(--ysf-white);
}

/*
 * Honour the OS preference before the visitor has chosen, but never
 * override an explicit choice.
 */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--ysf-surface: var(--ysf-char-800);
		--ysf-surface-warm: var(--ysf-char-700);
		--ysf-surface-sunken: var(--ysf-char-900);
		--ysf-surface-veil: rgba(16, 17, 20, 0.86);

		--ysf-ink: #f5f5f3;
		--ysf-ink-heading: #f5f5f3;
		--ysf-ink-muted: #a7abb4;
		--ysf-ink-faint: #8b909a; /* 5.6:1 on #101114; #767a83 was 4.4:1 */

		--ysf-line: rgba(245, 245, 243, 0.14);
		--ysf-line-strong: rgba(245, 245, 243, 0.26);
		--ysf-line-soft: rgba(245, 245, 243, 0.08);

		--ysf-accent: #8aa9f2; /* the original's dark accent; royal-400 is 4.2:1 on the warm surface */
	}
}