/* ==========================================================================
   Design tokens — extracted from the 2026 design comp.
   Change values here, never in component files.
   ========================================================================== */

:root {
	/* ---- Brand ---- */
	--lmt-red: #d82525;
	--lmt-red-dark: #b31d1d;
	--lmt-red-tint: #fdecec;

	--lmt-black: #0a0a0a;
	--lmt-black-soft: #161616;
	--lmt-black-raised: #1c1c1c;
	--lmt-black-line: #2a2a2a;

	--lmt-white: #ffffff;

	/* ---- Greys (comp ramp) ---- */
	--lmt-grey-100: #f6f6f6;
	--lmt-grey-200: #ececec;
	--lmt-grey-300: #e3e3e3;
	--lmt-grey-400: #d0d0d0;
	--lmt-grey-500: #999999;
	--lmt-grey-600: #777777;
	--lmt-grey-700: #555555;

	/* ---- Semantic ---- */
	--lmt-ink: var(--lmt-black);
	--lmt-ink-muted: var(--lmt-grey-600);
	--lmt-ground: var(--lmt-white);
	--lmt-ground-alt: var(--lmt-grey-100);
	--lmt-rule: var(--lmt-grey-300);
	--lmt-rule-soft: var(--lmt-grey-200);

	--lmt-ok: #1a7f47;
	--lmt-ok-tint: #e8f5ed;
	--lmt-pending: var(--lmt-red);
	--lmt-pending-tint: var(--lmt-red-tint);
	--lmt-neutral-tint: #f3f3f3;

	/* ---- Type ---- */
	--lmt-font-display: 'Anton', 'Haettenschweiler', 'Arial Narrow Bold', Impact, sans-serif;
	--lmt-font-body: 'Figtree', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;

	/* Fluid display scale. Comp runs 36px mobile to ~104px desktop on h1. */
	/* Comp: h1 88px, h2 56px, card h3 30px. */
	--lmt-size-display-1: clamp(2.75rem, 1.2rem + 5.8vw, 6rem);   /* comp: 96px */
	--lmt-size-display-2: clamp(2rem, 1.1rem + 3.1vw, 3.5rem);
	--lmt-size-display-3: clamp(1.5rem, 1.1rem + 1.6vw, 1.875rem);

	--lmt-size-xs: 0.6875rem;   /* 11px — badges and tags */
	--lmt-size-eyebrow: 0.8125rem; /* 13px — section eyebrows */
	--lmt-size-sm: 0.8125rem;   /* 13px */
	--lmt-size-base: 1rem;      /* 16px */
	--lmt-size-md: 1.0625rem;   /* 17px */
	--lmt-size-lg: 1.1875rem;   /* 19px */
	--lmt-size-xl: 1.375rem;    /* 22px */

	--lmt-leading-tight: 0.94;
	--lmt-leading-snug: 1.2;
	--lmt-leading-body: 1.6;

	--lmt-tracking-eyebrow: 0.14em;
	--lmt-tracking-label: 0.08em;
	--lmt-tracking-display: -0.005em;

	/*
	 * How far the admin bar pushes everything pinned to the viewport down.
	 * Zero for visitors; the bar only exists for signed-in staff.
	 */
	--lmt-admin-bar: 0px;

	/* ---- Layout ---- */
	--lmt-max: 1440px;          /* outer shell */
	--lmt-measure: 42rem;       /* running text */
	--lmt-measure-narrow: 35rem;

	/* Comp: 56px horizontal gutter, 104px/96px vertical section padding. */
	--lmt-gutter: clamp(1.25rem, 4vw, 3.5rem);
	--lmt-section-y: clamp(3.5rem, 8vw, 6.5rem);
	--lmt-section-y-end: clamp(3rem, 7vw, 6rem);

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

	/* ---- Other ---- */
	--lmt-radius: 0px;          /* comp is square-cornered throughout */
	--lmt-header-h: 72px;
	--lmt-transition: 160ms ease;
}

/*
 * The WordPress admin bar sits fixed over the top of the window, so anything
 * of ours pinned there has to start below it. Its height is 32px, 46px on the
 * narrower breakpoint, and under 600px WordPress lets it scroll away, which is
 * why the offset goes back to zero there.
 */
body.admin-bar { --lmt-admin-bar: 32px; }

@media screen and (max-width: 782px) {
	body.admin-bar { --lmt-admin-bar: 46px; }
}

@media screen and (max-width: 600px) {
	body.admin-bar { --lmt-admin-bar: 0px; }
}