/**
 * Design tokens.
 *
 * The single source of truth for colour, type, space, radius and motion.
 * Nothing below this layer should contain a raw colour or a magic number —
 * if a value is worth reusing, it belongs here.
 *
 * Colour is authored in OKLCH, which keeps perceived lightness consistent
 * across hues (the reason the dark palette holds up without hand-tuning).
 * Every colour ships a sRGB hex fallback on the line above: browsers without
 * OKLCH support keep the hex, everything else takes the wider-gamut value.
 */

:root {
	/* -- Brand ---------------------------------------------------------- */

	--lg-primary: #1d4ed8;
	--lg-primary: oklch(0.488 0.217 264.4);
	--lg-primary-fg: #fafafa;
	--lg-primary-fg: oklch(0.985 0 0);

	/* -- Surfaces ------------------------------------------------------- */

	--lg-bg: #ffffff;
	--lg-bg: oklch(1 0 0);
	--lg-fg: #0a0a0a;
	--lg-fg: oklch(0.145 0 0);
	--lg-card: #ffffff;
	--lg-card: oklch(1 0 0);
	--lg-muted: #f5f5f5;
	--lg-muted: oklch(0.97 0 0);
	--lg-muted-fg: #737373;
	--lg-muted-fg: oklch(0.556 0 0);
	--lg-accent: #f5f5f5;
	--lg-accent: oklch(0.97 0 0);
	--lg-accent-fg: #171717;
	--lg-accent-fg: oklch(0.205 0 0);
	--lg-border: #e5e5e5;
	--lg-border: oklch(0.922 0 0);
	--lg-ring: var(--lg-primary);

	/* Always-dark surface used by the closing CTA band and the Go hero. */
	--lg-inverse: #09090b;
	--lg-inverse-fg: #fafafa;
	--lg-inverse-muted: #a1a1aa;
	--lg-inverse-border: #27272a;

	--lg-success: #059669;
	--lg-success: oklch(0.596 0.145 163.2);

	/*
	 * Translucent brand tints. Authored as a channel triplet so they can be
	 * used at any alpha without declaring a token per opacity step.
	 */
	--lg-primary-rgb: 29 78 216;

	/* -- Typography ----------------------------------------------------- */

	--lg-font-sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
	--lg-font-mono: 'Geist Mono', ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;

	--lg-text-xs: 0.75rem;
	--lg-text-sm: 0.875rem;
	--lg-text-base: 1rem;
	--lg-text-lg: 1.125rem;
	--lg-text-xl: 1.25rem;
	--lg-text-2xl: 1.5rem;
	--lg-text-3xl: 1.875rem;
	--lg-text-4xl: 2.25rem;
	--lg-text-5xl: 3rem;
	--lg-text-6xl: 3.75rem;

	--lg-leading-tight: 1.15;
	--lg-leading-snug: 1.35;
	--lg-leading-normal: 1.5;
	--lg-leading-relaxed: 1.65;

	/* Eyebrow / label tracking — the wide mono caps used across sections. */
	--lg-tracking-label: 0.14em;
	--lg-tracking-tight: -0.02em;

	/* -- Space ---------------------------------------------------------- */

	--lg-space-1: 0.25rem;
	--lg-space-2: 0.5rem;
	--lg-space-3: 0.75rem;
	--lg-space-4: 1rem;
	--lg-space-5: 1.25rem;
	--lg-space-6: 1.5rem;
	--lg-space-8: 2rem;
	--lg-space-10: 2.5rem;
	--lg-space-12: 3rem;
	--lg-space-14: 3.5rem;
	--lg-space-16: 4rem;
	--lg-space-20: 5rem;
	--lg-space-24: 6rem;

	/* -- Layout --------------------------------------------------------- */

	--lg-container: 72rem;   /* Standard marketing width. */
	--lg-container-prose: 48rem; /* FAQ and long-form copy. */
	--lg-container-narrow: 42rem;
	--lg-gutter: 1rem;
	--lg-header-height: 4rem;

	/* -- Radius --------------------------------------------------------- */

	--lg-radius: 0.625rem;
	--lg-radius-sm: 0.375rem;
	--lg-radius-md: 0.5rem;
	--lg-radius-lg: var(--lg-radius);
	--lg-radius-xl: 0.875rem;
	--lg-radius-2xl: 1rem;
	--lg-radius-full: 9999px;

	/* -- Elevation ------------------------------------------------------ */

	--lg-shadow-xs: 0 1px 2px 0 rgb(0 0 0 / 0.05);
	--lg-shadow-sm: 0 1px 3px 0 rgb(0 0 0 / 0.08), 0 1px 2px -1px rgb(0 0 0 / 0.08);
	--lg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
	--lg-shadow-primary: 0 10px 24px -6px rgb(var(--lg-primary-rgb) / 0.18);

	/* -- Motion --------------------------------------------------------- */

	--lg-duration: 200ms;
	--lg-ease: cubic-bezier(0.4, 0, 0.2, 1);

	/* -- Z-index -------------------------------------------------------- */

	--lg-z-header: 50;
	--lg-z-drawer: 60;
	--lg-z-skip: 100;
}

@media (min-width: 640px) {
	:root {
		--lg-gutter: 1.5rem;
	}
}

/**
 * Dark scheme.
 *
 * Applied by a class rather than a bare media query so the header toggle can
 * override the system preference. The pre-paint script in inc/assets.php sets
 * the class before first paint, so there is no flash on load.
 */
.lg-dark {
	--lg-primary: #4c7ff7;
	--lg-primary: oklch(0.623 0.188 264.4);
	--lg-primary-rgb: 76 127 247;

	--lg-bg: #0a0a0a;
	--lg-bg: oklch(0.145 0 0);
	--lg-fg: #fafafa;
	--lg-fg: oklch(0.985 0 0);
	--lg-card: #171717;
	--lg-card: oklch(0.205 0 0);
	--lg-muted: #262626;
	--lg-muted: oklch(0.269 0 0);
	--lg-muted-fg: #a1a1a1;
	--lg-muted-fg: oklch(0.708 0 0);
	--lg-accent: #262626;
	--lg-accent: oklch(0.269 0 0);
	--lg-accent-fg: #fafafa;
	--lg-accent-fg: oklch(0.985 0 0);
	--lg-border: #2a2a2a;
	--lg-border: oklch(1 0 0 / 12%);

	--lg-success: #34d399;
	--lg-success: oklch(0.765 0.148 163.2);

	--lg-shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.4), 0 4px 6px -4px rgb(0 0 0 / 0.4);

	color-scheme: dark;
}