/* Legacy foundation tokens; font faces are owned by typography-tokens.css.
 * Fonts are bundled in assets/fonts; no CDN is used.
 * The final four-color semantic palette and all compatibility aliases live
 * in tokens.css. Keep foundation tokens for editor and legacy consumers.
 */

:root {
	/* Color system */
	--color-primary: #17263f;

	/* Accent — navy/steel blue (previously gold). Variable names kept as
	   -gold- throughout the codebase for zero-risk compatibility with
	   every existing rule; only the values changed. --color-gold is the
	   main accent (buttons, active states, icon fills on light
	   backgrounds); --color-gold-light is deliberately brighter so it
	   stays readable as a hover color on the dark navy header/footer
	   (where the darker variants would blend in); --color-gold-dark is
	   for depth in gradients. */
	--color-gold: #263f6b;
	--color-gold-light: #91a0bb;
	--color-gold-dark: #172b4e;

	/* Small readable text (links, labels) on light backgrounds — the
	   main accent already clears WCAG AA here, but this stays as the
	   dedicated "definitely passes" variant other rules already point
	   to. Dark backgrounds (navy footer/header) use --color-gold-light
	   instead, not this one. */
	--color-gold-text: #172b4e;
	--color-bg: #fafaf7;
	--color-card: #FFFFFF;
	--color-text: #222222;
	--color-border: #dcdfe4;
	--color-success: #2353a6;
	--color-warning: #F59E0B;
	--color-danger: #EF4444;
	--color-info: #3B82F6;

	--color-text-muted: #686e78;
	--color-primary-tint: #253249;

	/* Local type roles. Keep --font-fa for existing theme/plugin consumers.
	   Sahel is the reading face; display and UI use their own approved tokens. */
	--font-fa:var(--rn-font-reading, "Sahel", sans-serif);
	--font-heading:var(--rn-font-ui, "Epsilon", sans-serif);
	--font-ui:var(--rn-font-ui, "Epsilon", sans-serif);
	--font-en: system-ui, sans-serif;

	--fs-h1: clamp(1.85rem, 1.4rem + 2vw, 3rem);
	--fs-h2: clamp(1.35rem, 1.15rem + 1vw, 1.8rem);
	--fs-h3: 1.05rem;
	--fs-h4: 1rem;
	--fs-body: 1rem;
	--fs-small: 0.875rem;
	--fs-caption: 0.75rem;
	--fs-eyebrow: 0.8rem;

	/* Headings run tighter (premium, formal display feel) than the very
	   open, easy-reading body line-height below. */
	--lh-heading: 1.3;
	--lh-heading-tight: 1.15;
	--lh-body: 1.85;
	--tracking-tight: 0;
	--tracking-tighter: 0;
	--tracking-wide: 0;

	/* Spacing scale */
	--space-1: 0.25rem;
	--space-2: 0.5rem;
	--space-3: 1rem;
	--space-4: 1.5rem;
	--space-5: 2.5rem;
	--space-6: 4rem;
	--space-7: 6rem;

	/* Layout */
	--container-max: 1200px;
	--radius-sm: 8px;
	--radius-md: 14px;
	--radius-lg: 22px;
	--radius-full: 999px;

	/* Header stays a fixed dark navy regardless of the light/dark toggle —
	   a constant brand anchor, like a law firm's letterhead band. */
	--color-header-bg: #17263f;

	/* Elevation: soft, layered, low-contrast shadows for a refined,
	   not "boxy", sense of depth. */
	--shadow-xs: 0 1px 2px rgba(17,24,39, 0.05);
	--shadow-sm: 0 2px 8px rgba(17,24,39, 0.06);
	--shadow-card: 0 1px 2px rgba(17,24,39, 0.04), 0 12px 28px -8px rgba(17,24,39, 0.10);
	--shadow-lift: 0 20px 40px -16px rgba(17,24,39, 0.22);
	--shadow-gold: 0 10px 24px -10px rgba(47,92,147, 0.45);

	--ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
	--transition-fast: 0.15s var(--ease-standard);
	--transition-base: 0.25s var(--ease-standard);

	color-scheme: light;
}

/* Dark mode: same gold accent, inverted neutrals, no other hue changes. */
:root[data-theme='dark'] {
	--color-bg: #10161f;
	--color-card: #171f2c;
	--color-text: #EDEDED;
	--color-text-muted: #9CA3AF;
	--color-border: #333c4b;
	--color-primary: #F9FAFB;
	--color-primary-tint: #dcdfe4;
	--shadow-card: 0 1px 2px rgba(0,0,0, 0.3), 0 12px 28px -8px rgba(0,0,0, 0.45);
	--shadow-lift: 0 20px 40px -16px rgba(0,0,0, 0.55);
	color-scheme: dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme='light']) {
		--color-bg: #10161f;
		--color-card: #171f2c;
		--color-text: #EDEDED;
		--color-text-muted: #9CA3AF;
		--color-border: #333c4b;
		--color-primary: #F9FAFB;
		--color-primary-tint: #dcdfe4;
		--shadow-card: 0 1px 2px rgba(0,0,0, 0.3), 0 12px 28px -8px rgba(0,0,0, 0.45);
		--shadow-lift: 0 20px 40px -16px rgba(0,0,0, 0.55);
		color-scheme: dark;
	}
}