/* ─────────────────────────────────────────────────────────────────────────
   Seemleius International — design tokens.

   MIRRORED FROM the Seemleius Design System (claude.ai/design project
   "Seemleius Design System", 66e4ae24) — tokens/colors.css, typography.css,
   spacing.css, effects.css. That project is the source of truth: if a value
   here disagrees with it, the design system wins and this file is stale.

   Variable names are kept IDENTICAL to the DS so components, guidelines and
   the corporate-profile template can be lifted across without rewriting.

   One deliberate deviation: the DS's typography.css opens with a Google Fonts
   @import. That must never ship — the brand requires self-hosted fonts
   (GDPR + tracker-blocking), so the faces are mirrored locally in fonts.css
   and functions.php actively dequeues anything pointing at fonts.googleapis.com.
   ───────────────────────────────────────────────────────────────────────── */

:root {
	/* ── Brand anchors (sampled from the logo art + site theme-color) ── */
	--brand-navy: #1A3A6B;
	--brand-green: #7BC144;
	--brand-green-bright: #7FC350;
	--brand-indigo: #3C3D76;   /* wordmark lockup only — NOT a UI colour */

	/* ── Navy ramp (primary) ── */
	--navy-50:  #EEF3FA;
	--navy-100: #DCE6F3;
	--navy-200: #B9CCE7;
	--navy-300: #8FACD6;
	--navy-400: #5F86BD;
	--navy-500: #3B62A0;
	--navy-600: #274C86;
	--navy-700: #1A3A6B;
	--navy-800: #142C52;
	--navy-900: #0F2140;
	--navy-950: #0A1730;

	/* ── Green ramp (accent) ── */
	--green-50:  #F3FAEB;
	--green-100: #E4F3D3;
	--green-200: #C9E7A9;
	--green-300: #A8D878;
	--green-400: #8ECB57;
	--green-500: #7BC144;
	--green-600: #61A032;
	--green-700: #4B7D27;
	--green-800: #3C6321;
	--green-900: #33531F;

	/* ── Neutrals (navy-tinted cool greys) ── */
	--neutral-0:   #FFFFFF;
	--neutral-50:  #F6F8FB;
	--neutral-100: #EDF1F6;
	--neutral-200: #DDE4EC;
	--neutral-300: #C4CEDB;
	--neutral-400: #9AA8BC;
	--neutral-500: #71809A;
	--neutral-600: #55647E;
	--neutral-700: #414E66;
	--neutral-800: #2B3750;
	--neutral-900: #1B2438;
	--neutral-950: #101827;

	/* ── Semantic ── */
	--success: #61A032; --success-bg: #F3FAEB; --success-text: #4B7D27;
	--warning: #C77E14; --warning-bg: #FBF3E4; --warning-text: #8F5A0D;
	--danger:  #C2402F; --danger-bg:  #FBEDEA; --danger-text:  #9C3223;
	--info:    #3B62A0; --info-bg:    #EEF3FA; --info-text:    #274C86;

	/* ── Text ── */
	--text-heading: var(--navy-900);
	--text-body: var(--neutral-800);
	--text-muted: var(--neutral-600);
	--text-faint: var(--neutral-500);
	--text-on-navy: #FFFFFF;
	--text-on-navy-muted: #B9CCE7;
	--text-on-green: #0F2140;

	/* ── Surfaces ── */
	--surface-page: #FFFFFF;
	--surface-subtle: var(--neutral-50);
	--surface-card: #FFFFFF;
	--surface-navy: var(--navy-700);
	--surface-navy-deep: var(--navy-900);
	--surface-green-tint: var(--green-50);

	/* ── Borders ── */
	--border-subtle: var(--neutral-200);
	--border-strong: var(--neutral-300);
	--border-on-navy: rgba(255, 255, 255, .16);

	/* ── Interactive ── */
	--accent: var(--green-500);
	--accent-strong: var(--green-600);
	--accent-hover: var(--green-600);
	--primary: var(--navy-700);
	--primary-hover: var(--navy-800);
	--link: var(--navy-600);
	--link-hover: var(--green-700);
	--focus-ring: 0 0 0 3px rgba(123, 193, 68, .45);

	/* ── Typography — Manrope (display) + Source Sans 3 (body), self-hosted ── */
	--font-display: 'Manrope', -apple-system, 'Segoe UI', sans-serif;
	--font-body: 'Source Sans 3', -apple-system, 'Segoe UI', sans-serif;

	--text-display: 3.5rem;
	--text-h1: 2.75rem;
	--text-h2: 2.125rem;
	--text-h3: 1.625rem;
	--text-h4: 1.25rem;
	--text-lead: 1.1875rem;
	--text-body-size: 1rem;
	--text-small: .875rem;
	--text-caption: .78rem;

	--leading-display: 1.08;
	--leading-heading: 1.15;
	--leading-body: 1.6;
	--leading-tight: 1.35;

	--weight-display: 800;
	--weight-heading: 700;
	--weight-semibold: 600;
	--weight-body: 400;

	--kicker-size: .8125rem;
	--kicker-tracking: .14em;
	--kicker-weight: 700;

	--tracking-display: -0.02em;
	--tracking-heading: -0.01em;

	/* ── Spacing (4px base) ── */
	--space-1: 4px;   --space-2: 8px;   --space-3: 12px;  --space-4: 16px;
	--space-5: 20px;  --space-6: 24px;  --space-8: 32px;  --space-10: 40px;
	--space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px;

	/* ── Radii — DS: cards 14, buttons/inputs 10, chips pill ── */
	--radius-xs: 4px;
	--radius-sm: 6px;
	--radius-md: 10px;
	--radius-lg: 14px;
	--radius-xl: 20px;
	--radius-pill: 999px;

	/* ── Layout ── */
	--container-max: 1180px;
	--container-narrow: 820px;
	--container-pad: 24px;

	/* ── Shadows — navy-tinted, soft, low. Never coloured glows. ── */
	--shadow-xs: 0 1px 2px rgba(15, 33, 64, .06);
	--shadow-sm: 0 1px 3px rgba(15, 33, 64, .08), 0 1px 2px rgba(15, 33, 64, .04);
	--shadow-md: 0 4px 12px rgba(15, 33, 64, .08), 0 1px 3px rgba(15, 33, 64, .05);
	--shadow-lg: 0 12px 32px rgba(15, 33, 64, .12), 0 2px 6px rgba(15, 33, 64, .06);
	--shadow-navy: 0 12px 32px rgba(10, 23, 48, .35);

	/* ── Motion — restrained: 120–320ms, ease-out. No bounces, no parallax. ── */
	--ease-out: cubic-bezier(.16, 1, .3, 1);
	--ease-in-out: cubic-bezier(.65, 0, .35, 1);
	--duration-fast: 120ms;
	--duration-base: 200ms;
	--duration-slow: 320ms;

	/* ═══ Site-local additions (not in the DS — page chrome this site needs) ═══ */
	--header-h: 72px;
	--section-y: clamp(64px, 5vw, 96px);      /* DS: "sections breathe 64–96px" */
	--section-y-tight: clamp(48px, 4vw, 64px);
	--z-header: 100;
	--z-dropdown: 200;
	--z-overlay: 300;
}

@media (prefers-reduced-motion: reduce) {
	:root {
		--duration-fast: 1ms;
		--duration-base: 1ms;
		--duration-slow: 1ms;
	}
}