/**
 * Design tokens.
 *
 * Every component must use these variables. Do not hard-code colors, type,
 * spacing, or radius in component CSS.
 *
 * If an Elementor Site Kit defines globals, those values win via --e-global-*.
 */

:root {
	/* Colors */
	--nl-color-primary: var(--e-global-color-primary, #1d4ed8);
	--nl-color-secondary: var(--e-global-color-secondary, #0f172a);
	--nl-color-accent: var(--e-global-color-accent, #2563eb);
	--nl-color-heading: var(--e-global-color-heading, #0f172a);
	--nl-color-body: var(--e-global-color-text, #475569);
	--nl-color-light-text: var(--e-global-color-text-light, #64748b);
	--nl-color-background: var(--e-global-color-background, #ffffff);
	--nl-color-background-light: var(--e-global-color-background-light, #f8fafc);
	--nl-color-border: var(--e-global-color-border, #e2e8f0);
	--nl-color-on-accent: #ffffff;

	/* Button interaction (used by base.css — do not copy these into kits) */
	--nl-btn-lift: -2px;
	--nl-btn-press: 1px;
	--nl-btn-overlay-hover: color-mix(in srgb, var(--nl-color-primary) 14%, transparent);
	--nl-btn-overlay-active: color-mix(in srgb, var(--nl-color-primary) 24%, transparent);
	--nl-btn-shadow-hover: 0 6px 18px color-mix(in srgb, var(--nl-color-primary) 28%, transparent);
	--nl-btn-shadow-active: 0 1px 3px color-mix(in srgb, var(--nl-color-heading) 18%, transparent);

	/* Typography roles — system stack until Elementor (or a kit) replaces them */
	--nl-font-heading: var(--e-global-typography-primary-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
	--nl-font-body: var(--e-global-typography-text-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);
	--nl-font-button: var(--e-global-typography-accent-font-family, system-ui, -apple-system, "Segoe UI", sans-serif);

	--nl-fs-body: 1rem;
	--nl-lh-body: 1.6;
	--nl-lh-heading: 1.2;
	--nl-fw-regular: 400;
	--nl-fw-medium: 500;
	--nl-fw-semibold: 600;

	/* Spacing scale */
	--nl-space-xs: 8px;
	--nl-space-sm: 16px;
	--nl-space-md: 24px;
	--nl-space-lg: 32px;
	--nl-space-xl: 48px;
	--nl-space-2xl: 64px;
	--nl-space-3xl: 96px;

	/* Radius */
	--nl-radius-sm: 4px;
	--nl-radius-md: 8px;
	--nl-radius-lg: 12px;
	--nl-radius-pill: 999px;

	/* Layout */
	--nl-content-width: 1200px;
	--nl-pad-inline: 20px; /* mobile; overridden in responsive.css */
}