/**
 * Meridian Engineering — Design Tokens
 *
 * Single source of truth for the brand. Values come from the Figma brand
 * guidelines (Meridian Engineering Webpages, node 153:61578). Nothing in the
 * theme or the sections plugin should hard-code a hex, font or spacing value —
 * always reference a token from this file.
 */

:root {
	/* ---------------------------------------------------------------------
	 * Palette — raw brand values
	 * ------------------------------------------------------------------ */
	--md-black: #000000;
	--md-white: #ffffff;
	--md-blue: #006bb6;
	--md-green: #5dae71;
	--md-yellow: #ecdd01;
	--md-light-blue: #8ac9ec;

	/* Ink — the near-black used for all body and heading copy. */
	--md-ink: #0a1628;
	--md-ink-rgb: 10, 22, 40;

	/* Interaction shades, derived from the brand blue. */
	--md-blue-dark: #005893;
	--md-blue-darker: #004672;
	--md-blue-tint: #e6f1f8;

	/* Neutral ramp, derived from ink so greys stay in the brand's temperature. */
	--md-grey-50: #f6f7f9;
	--md-grey-100: #eceef1;
	--md-grey-200: #d9dde3;
	--md-grey-300: #b9c0ca;
	--md-grey-600: #5a6472;

	/* Footer grey. A true neutral rather than a member of the ink-tinted ramp
	 * above, because the footer sits on pure black. 10.9:1 on black — AAA. */
	--md-grey-footer: #b9b9b9;

	/* ---------------------------------------------------------------------
	 * Semantic colour roles — prefer these over raw palette tokens
	 * ------------------------------------------------------------------ */
	--md-color-text: var(--md-ink);
	/*
	 * Body copy across the whole site. A flat colour rather than ink at 0.9:
	 * an alpha value takes the colour of whatever is behind it, which is wrong
	 * for the one value that has to read the same on white, on the #f9fafb tints
	 * and over a photograph. 10.31:1 on white, so it clears AAA.
	 *
	 * Dark sections do not use it — .md-section--invert sets its own
	 * rgba(255, 255, 255, 0.9) on the section, which the copy inherits.
	 */
	--md-color-text-body: #364153;
	--md-color-text-muted: rgba(var(--md-ink-rgb), 0.7);
	/*
	 * One step past muted: form placeholders (18:9827) and legal fine print
	 * (18:10044) are both drawn in this grey. A true neutral, not a member of the
	 * ink-tinted ramp, because that is what the comps use.
	 *
	 * WARNING — this fails WCAG AA as body text: 2.60:1 on white, against the
	 * 4.5:1 normal text needs. It is the designed value, so it is the default, but
	 * changing this one line to #6b7280 (4.50:1) clears AA everywhere it is used.
	 */
	--md-color-text-subtle: #99a1af;
	--md-color-text-inverse: var(--md-white);
	--md-color-heading: var(--md-ink);
	--md-color-eyebrow: var(--md-blue);
	--md-color-link: var(--md-blue);
	--md-color-link-hover: var(--md-blue-dark);
	--md-color-surface: var(--md-white);
	--md-color-surface-alt: var(--md-grey-50);
	--md-color-surface-invert: var(--md-ink);
	--md-color-border: var(--md-grey-200);
	--md-color-rule: rgba(var(--md-ink-rgb), 0.08);
	--md-color-focus: var(--md-blue);

	/* Header — white type on a dark ground, per the Figma nav (node 1:1385).
	 * In overlay mode the background goes transparent and the hero shows
	 * through; the ink stays white either way. */
	--md-color-header-bg: var(--md-black);
	--md-color-header-text: var(--md-white);
	--md-color-header-text-hover: var(--md-light-blue);
	--md-header-height: 5rem; /* 80px */
	/*
	 * Currently applied nowhere. The rule that put it on .md-header was removed, so
	 * the header no longer carries a top inset — the token is kept so that restoring
	 * that padding is a one-line change, but note it must then be added back to
	 * --md-header-total below as well.
	 */
	--md-header-pad-top: 0.9375rem; /* 15px */
	/*
	 * Full occupied height: what a fixed header actually covers, and so what pages
	 * without a hero pad by, what in-page anchors scroll clear of, and where a sticky
	 * element has to pin to sit against it.
	 *
	 * It has to track the real box. This read height + pad-top (95px) after the top
	 * padding had been removed from the header, which left every consumer offsetting
	 * 14px too far — the Markets filter pinned at 95px while the header ended at 81px,
	 * and the gap between them was the visible symptom.
	 *
	 * 80px of min-height plus the 1px bottom border, which is present in both header
	 * states — transparent at rest rather than absent — so it occupies space either
	 * way and belongs in the sum.
	 */
	--md-header-total: calc(var(--md-header-height) + var(--md-border-width));

	/* Tinted section ground with a faint dot texture, per the card grid
	 * (node 1:1005). The dots sit on a ~20px pitch at the threshold of
	 * visibility — the value below is measured from the comp. */
	--md-color-surface-tint: #f9fafb;
	--md-color-dot: rgba(var(--md-ink-rgb), 0.06);
	--md-dot-pitch: 20px;

	/* Dropdown / overlay panels, per the Figma dropdowns (nodes 160:62941 and
	 * 160:63702). Deliberately near-black alphas rather than ink-tinted, to
	 * match the design exactly. */
	--md-color-panel-border: rgba(0, 0, 0, 0.1);
	--md-color-panel-rule: rgba(0, 0, 0, 0.06);
	--md-color-chevron: #d1d5dc;
	--md-shadow-panel: 0 10px 7.5px rgba(0, 0, 0, 0.1), 0 4px 3px rgba(0, 0, 0, 0.1);

	/* Footer — black ground, per the Figma footer spec (node 1:1233). */
	--md-color-footer-bg: var(--md-black);
	--md-color-footer-text: var(--md-grey-footer);
	--md-color-footer-heading: var(--md-white);
	--md-color-footer-rule: var(--md-grey-footer);

	/* ---------------------------------------------------------------------
	 * Typography
	 * ------------------------------------------------------------------ */
	--md-font-sans: "Cabin", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Helvetica Neue", Arial, sans-serif;
	--md-font-body: var(--md-font-sans);
	--md-font-heading: var(--md-font-sans);

	--md-weight-regular: 400;
	--md-weight-medium: 500;
	--md-weight-semibold: 600;
	--md-weight-bold: 700;

	/* Type scale. Display/H1 fluidly scales between the mobile and 1440px
	 * desktop sizes; everything below it is fixed because the design only
	 * steps the largest sizes down. */
	--md-text-display: clamp(2.5rem, 1.65rem + 3.4vw, 3.75rem); /* 40 → 60px */
	--md-text-h1: clamp(2.25rem, 1.6rem + 2.6vw, 3.75rem); /* 36 → 60px */
	--md-text-h2: clamp(1.625rem, 1.36rem + 1.06vw, 1.875rem); /* 26 → 30px */
	--md-text-h3: 1.5rem; /* 24px */
	--md-text-h4: 1.25rem; /* 20px */
	--md-text-h5: 1.125rem; /* 18px */
	--md-text-h6: 1rem; /* 16px */
	--md-text-lead: 1.25rem; /* 20px */
	--md-text-body: 1.125rem; /* 18px */
	/*
	 * 16px, and the floor for anything a visitor is expected to read as prose.
	 *
	 * The comps draw section body copy at 13px and 15px, which is too small to read
	 * comfortably and below the size a browser defaults to. Every section whose body
	 * copy sat at either value now reads this token instead, so the floor is stated
	 * once here rather than argued in twenty stylesheets. Sizes below it are for
	 * chrome — labels, eyebrows, legal lines — not for prose.
	 *
	 * Deliberately not --md-text-body (18px): that is the size long-form page copy
	 * is set at, and a section lede is not that.
	 */
	--md-text-small: 1rem; /* 16px */
	--md-text-caption: 0.875rem; /* 14px */
	--md-text-eyebrow: 0.8125rem; /* 13px */
	--md-text-fine: 0.75rem; /* 12px — legal links */
	--md-text-micro: 0.6875rem; /* 11px — copyright */

	--md-leading-tight: 1; /* 60/60 — display */
	--md-leading-heading: 1.2; /* 30/36 — headings */
	--md-leading-snug: 1.5; /* 16/24 — UI text */
	--md-leading-body: 1.625; /* 18/29.25 — body copy */

	--md-tracking-tight: -0.01em;
	--md-tracking-normal: 0;
	--md-tracking-wide: 0.06em; /* 0.78px on 13px — eyebrow / label */

	/* ---------------------------------------------------------------------
	 * Spacing — 8px base scale
	 * ------------------------------------------------------------------ */
	--md-space-3xs: 0.25rem; /* 4 */
	--md-space-2xs: 0.5rem; /* 8 */
	--md-space-xs: 0.75rem; /* 12 */
	--md-space-sm: 1rem; /* 16 */
	--md-space-md: 1.5rem; /* 24 */
	--md-space-lg: 2rem; /* 32 */
	--md-space-xl: 3rem; /* 48 */
	--md-space-2xl: 4rem; /* 64 */
	--md-space-3xl: 5rem; /* 80 — section padding */
	--md-space-4xl: 7.5rem; /* 120 */

	/* ---------------------------------------------------------------------
	 * Layout
	 * ------------------------------------------------------------------ */
	--md-container-max: 80rem; /* 1280px content width */
	--md-container-wide: 90rem; /* 1440px */
	--md-container-narrow: 45rem; /* 720px — long-form reading measure */
	/*
	 * The mobile gutter. Only mobile reads this value — the media query below
	 * raises it to 48px from 48em up, so changing it here cannot touch tablet or
	 * desktop.
	 */
	--md-container-gutter: var(--md-space-md); /* 24px */
	--md-section-padding-block: var(--md-space-3xl); /* 80px */
	--md-measure: 56ch; /* 896px at 18px — matches the Figma paragraph width */

	/* ---------------------------------------------------------------------
	 * Borders, radii, elevation
	 * ------------------------------------------------------------------ */
	--md-border-width: 1px;
	--md-radius-sm: 0.25rem;
	--md-radius-md: 0.5rem;
	--md-radius-lg: 1rem;
	--md-radius-pill: 999rem;

	--md-shadow-sm: 0 1px 2px rgba(var(--md-ink-rgb), 0.06);
	--md-shadow-md: 0 4px 16px rgba(var(--md-ink-rgb), 0.08);
	--md-shadow-lg: 0 16px 48px rgba(var(--md-ink-rgb), 0.14);

	/* ---------------------------------------------------------------------
	 * Controls
	 * ------------------------------------------------------------------ */
	--md-control-height: 3.5rem; /* 56px — primary button */
	--md-control-height-sm: 3rem; /* 48px — secondary button */
	--md-control-padding-x: var(--md-space-lg); /* 32px */
	--md-icon-size: 3rem; /* 48px — brand icon set */
	--md-icon-size-sm: 1.375rem; /* 22px — inline / button icon */
	--md-icon-size-xs: 1rem; /* 16px — social / footer icon */

	/* ---------------------------------------------------------------------
	 * Motion
	 * ------------------------------------------------------------------ */
	--md-duration-fast: 120ms;
	--md-duration: 200ms;
	--md-duration-slow: 400ms;
	--md-ease: cubic-bezier(0.4, 0, 0.2, 1);
	--md-transition: var(--md-duration) var(--md-ease);

	/* Z-index scale — keeps the theme out of Elementor's own stacking range. */
	--md-z-base: 1;
	--md-z-sticky: 100;
	--md-z-header: 200;
	--md-z-overlay: 300;
	--md-z-skip-link: 400;
}

/* Larger gutters once there is room for them. */
@media (min-width: 48em) {
	:root {
		--md-container-gutter: var(--md-space-xl); /* 48px */
		--md-section-padding-block: var(--md-space-4xl); /* 120px */
	}
}