/* =========================================================
   MERIDIAN FOUNDATION
   Global design tokens, typography, controls, utilities,
   accessibility, and reusable motion primitives.
   ========================================================= */


/* =========================================================
   1. DESIGN TOKENS
   ========================================================= */

/* Locked Meridian tokens.
   Inter uses an installed font until a font asset is approved. */
:root {
	--meridian-primary: #005EA8;
	--meridian-deep: #0B2E4F;
	--meridian-soft: #EAF4FB;
	--meridian-background: #F7FAFC;
	--meridian-white: #FFFFFF;

	--meridian-text: #24323D;
	--meridian-secondary: #52606D;
	--meridian-muted: #6B7A88;

	--meridian-border: #D9E2EC;
	--meridian-border-strong: #BCCCDC;

	--meridian-emergency: #B42318;
	--meridian-emergency-bg: #FEF3F2;

	--meridian-success: #027A48;
	--meridian-success-bg: #ECFDF3;

	--meridian-warning: #B54708;
	--meridian-warning-bg: #FFFAEB;

	--meridian-info: #026AA2;
	--meridian-info-bg: #F0F9FF;

	--meridian-font:
		Inter,
		system-ui,
		-apple-system,
		BlinkMacSystemFont,
		"Segoe UI",
		sans-serif;

	--meridian-radius-sm: 8px;
	--meridian-radius-md: 12px;
	--meridian-radius-lg: 16px;

	--meridian-shadow-1:
		0 2px 8px rgb(11 46 79 / 5%);

	--meridian-shadow-2:
		0 8px 24px rgb(11 46 79 / 10%);

	--meridian-shadow-3:
		0 16px 40px rgb(11 46 79 / 12%),
		0 0 32px rgb(0 94 168 / 6%);

	--meridian-duration: 220ms;

	--meridian-space-4: 4px;
	--meridian-space-8: 8px;
	--meridian-space-12: 12px;
	--meridian-space-16: 16px;
	--meridian-space-24: 24px;
	--meridian-space-32: 32px;
	--meridian-space-40: 40px;
	--meridian-space-48: 48px;
	--meridian-space-64: 64px;
	--meridian-space-80: 80px;
	--meridian-space-96: 96px;
}


/* =========================================================
   2. BASE TYPOGRAPHY
   ========================================================= */

body {
	background: var(--meridian-background);
	color: var(--meridian-text);

	font-family: var(--meridian-font);
	font-size: 1rem;
	line-height: 1.6;
}

body :where(h1, h2, h3, h4, h5, h6) {
	color: var(--meridian-deep);

	font-family: var(--meridian-font);
	font-weight: 600;
	line-height: 1.2;

	overflow-wrap: anywhere;
}

body h1 {
	font-size: clamp(2.25rem, 5vw, 4rem);
	font-weight: 700;
	line-height: 1.1;
}

body h2 {
	font-size: clamp(1.875rem, 3.5vw, 2.75rem);
	font-weight: 700;
}

body h3 {
	font-size: 1.5rem;
}

body h4 {
	font-size: 1.25rem;
}

body h5 {
	font-size: 1.125rem;
}

body h6 {
	font-size: 1rem;
}


/* =========================================================
   3. TYPOGRAPHY UTILITIES
   ========================================================= */

.meridian-body-large {
	font-size: 1.125rem;
}

.meridian-small {
	font-size: 0.875rem;
}

.meridian-meta {
	color: var(--meridian-secondary);
	font-size: 0.75rem;
}


/* =========================================================
   4. CONTENT LINKS
   ========================================================= */

/*
 * Muted is available as a brand token.
 * Secondary is used for readable small text.
 */
.entry-content :where(p, li) > a {
	text-decoration: underline;
	text-underline-offset: 0.2em;
}


/* =========================================================
   5. GLOBAL FOCUS
   ========================================================= */

body :where(
	a,
	button,
	input,
	select,
	textarea,
	[tabindex]
):focus-visible {
	outline: 3px solid var(--meridian-primary);
	outline-offset: 3px;

	box-shadow:
		0 0 0 3px var(--meridian-white);
}


/* =========================================================
   6. BUTTON FOUNDATION
   ========================================================= */

body :where(
	.meridian-button,
	.wp-block-button__link
) {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;

	box-sizing: border-box;

	min-width: 44px;
	min-height: 44px;

	padding: 12px 24px;

	border: 2px solid var(--meridian-primary);
	border-radius: var(--meridian-radius-md);

	background: var(--meridian-primary);
	color: var(--meridian-white);

	font-family: var(--meridian-font);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;

	text-align: center;
	text-decoration: none;
	white-space: normal;
}

body :where(
	.meridian-button--secondary,
	.is-style-outline > .wp-block-button__link
) {
	border-color: var(--meridian-primary);

	background: var(--meridian-white);
	color: var(--meridian-primary);
}

body :where(
	.meridian-button,
	.wp-block-button__link
):hover {
	border-color: var(--meridian-deep);

	background: var(--meridian-deep);
	color: var(--meridian-white);
}


/* =========================================================
   7. FORM FOUNDATION
   ========================================================= */

.meridian-form :where(
	input:not([type="checkbox"])
		:not([type="radio"])
		:not([type="hidden"])
		:not([type="submit"])
		:not([type="button"]),
	select,
	textarea
) {
	box-sizing: border-box;

	width: 100%;
	min-height: 44px;

	padding: 12px 16px;

	border: 1px solid var(--meridian-secondary);
	border-radius: var(--meridian-radius-md);

	background: var(--meridian-white);
	color: var(--meridian-text);

	font: inherit;
}

.meridian-form label {
	display: block;

	margin-bottom: 8px;

	font-weight: 500;
}

.meridian-form :where(
	input,
	textarea
)::placeholder {
	color: var(--meridian-secondary);
	opacity: 1;
}

.meridian-form [aria-invalid="true"] {
	border-color: var(--meridian-emergency);
}

.meridian-form .meridian-field-error {
	color: var(--meridian-emergency);
}

.meridian-form .meridian-choice {
	display: flex;
	align-items: center;
	gap: 12px;

	min-height: 44px;
}

.meridian-form textarea {
	resize: vertical;
}


/* =========================================================
   8. ELEVATION UTILITIES
   ========================================================= */

.meridian-elevation-1 {
	border: 1px solid var(--meridian-border);
	box-shadow: var(--meridian-shadow-1);
}

.meridian-elevation-2 {
	border: 1px solid var(--meridian-border);
	box-shadow: var(--meridian-shadow-2);
}

.meridian-elevation-3 {
	border: 1px solid var(--meridian-border);
	box-shadow: var(--meridian-shadow-3);
}


/* =========================================================
   9. SHARED MOTION FOUNDATION
   Reusable across Home and future inner pages.
   ========================================================= */

.motion-ready .reveal-up,
.motion-ready .reveal-scale {
	opacity: 0;

	transition:
		opacity 600ms ease,
		transform 600ms ease;

	will-change: opacity, transform;
}

.motion-ready .reveal-up {
	transform: translateY(22px);
}

.motion-ready .reveal-scale {
	transform: scale(0.97);
}

.motion-ready .reveal-up.is-visible,
.motion-ready .reveal-scale.is-visible {
	opacity: 1;

	transform:
		translateY(0)
		scale(1);
}


/* =========================================================
   10. INTERACTION MOTION
   ========================================================= */

@media (prefers-reduced-motion: no-preference) {

	:where(
		.meridian-button,
		.wp-block-button__link
	) {
		transition:
			background-color var(--meridian-duration) ease,
			border-color var(--meridian-duration) ease;
	}
}


/* =========================================================
   11. REDUCED MOTION / ACCESSIBILITY
   Final safety override.
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

	html {
		scroll-behavior: auto !important;
	}

	*,
	*::before,
	*::after {
		animation: none !important;
		transition: none !important;
		scroll-behavior: auto !important;
	}

	.motion-ready .reveal-up,
	.motion-ready .reveal-scale {
		opacity: 1;
		transform: none;
		will-change: auto;
	}
}