/*
 * ITLU Design System token graph.
 * WordPress preset/custom variables are primitives; public --itlu-* aliases
 * provide stable semantics for components and project overrides.
 */
:root {

	/* Color semantics. */
	--itlu-color-text: var(--wp--preset--color--contrast, #202124);
	--itlu-color-text-muted: var(--wp--preset--color--text-muted, #565c65);
	--itlu-color-heading: var(--wp--preset--color--heading, #30343b);
	--itlu-color-surface: var(--wp--preset--color--base, #fff);
	--itlu-color-surface-alt: var(--wp--preset--color--surface-muted, #f4f5f6);
	--itlu-color-surface-raised: var(--wp--preset--color--surface-raised, #fff);
	--itlu-color-border: var(--wp--preset--color--border, #d8dadd);
	--itlu-color-border-strong: var(--wp--preset--color--border-strong, #656a73);
	--itlu-color-primary: var(--wp--preset--color--accent, #14532d);
	--itlu-color-primary-hover: color-mix(in srgb, var(--itlu-color-primary) 82%, #000);
	--itlu-color-primary-contrast: var(--wp--preset--color--on-media, #fff);
	--itlu-color-secondary: var(--wp--preset--color--secondary, #30343b);
	--itlu-color-secondary-hover: color-mix(in srgb, var(--itlu-color-secondary) 82%, #000);
	--itlu-color-secondary-contrast: var(--wp--preset--color--on-media, #fff);
	--itlu-color-link: var(--itlu-color-primary);
	--itlu-color-link-hover: var(--itlu-color-primary-hover);
	--itlu-color-focus: var(--wp--preset--color--focus, #005fcc);
	--itlu-color-success: var(--wp--preset--color--success, #176b36);
	--itlu-color-success-surface: color-mix(in srgb, var(--itlu-color-success) 10%, var(--itlu-color-surface));
	--itlu-color-warning: var(--wp--preset--color--warning, #744900);
	--itlu-color-warning-surface: color-mix(in srgb, var(--itlu-color-warning) 10%, var(--itlu-color-surface));
	--itlu-color-error: var(--wp--preset--color--error, #8a1c1c);
	--itlu-color-error-surface: color-mix(in srgb, var(--itlu-color-error) 8%, var(--itlu-color-surface));
	--itlu-color-info: var(--wp--preset--color--info, #0b5578);
	--itlu-color-info-surface: color-mix(in srgb, var(--itlu-color-info) 9%, var(--itlu-color-surface));
	--itlu-color-text-on-media: var(--wp--preset--color--on-media, #fff);

	/* Typography primitives and semantic roles. */
	--itlu-font-family-body: var(--wp--preset--font-family--sans, system-ui, -apple-system, blinkmacsystemfont, "Segoe UI", sans-serif);
	--itlu-font-family-heading: var(--itlu-font-family-body);
	--itlu-font-weight-normal: var(--wp--custom--itlu--font--weight--normal, 400);
	--itlu-font-weight-medium: var(--wp--custom--itlu--font--weight--medium, 650);
	--itlu-font-weight-strong: var(--wp--custom--itlu--font--weight--strong, 700);
	--itlu-font-weight-heading: var(--wp--custom--itlu--font--weight--heading, 750);
	--itlu-font-size-small: var(--wp--preset--font-size--small, 0.875rem);
	--itlu-font-size-meta: var(--wp--preset--font-size--meta, 0.925rem);
	--itlu-font-size-body: var(--wp--preset--font-size--body, 1rem);
	--itlu-font-size-lead: var(--wp--preset--font-size--lead, 1.125rem);
	--itlu-font-size-h6: var(--wp--preset--font-size--h-6, 1rem);
	--itlu-font-size-h5: var(--wp--preset--font-size--h-5, 1.125rem);
	--itlu-font-size-h4: var(--wp--preset--font-size--h-4, 1.25rem);
	--itlu-font-size-h3: var(--wp--preset--font-size--h-3, clamp(1.25rem, 3vw, 1.5rem));
	--itlu-font-size-h2: var(--wp--preset--font-size--h-2, clamp(1.5rem, 4vw, 2rem));
	--itlu-font-size-h1: var(--wp--preset--font-size--h-1, clamp(2rem, 6vw, 3.25rem));
	--itlu-font-size-display: var(--wp--preset--font-size--display, clamp(2.5rem, 8vw, 5rem));
	--itlu-line-height-body: var(--wp--custom--itlu--font--line-height--body, 1.6);
	--itlu-line-height-heading: var(--wp--custom--itlu--font--line-height--heading, 1.2);
	--itlu-line-height-compact: var(--wp--custom--itlu--font--line-height--compact, 1.1);
	--itlu-letter-spacing-heading: normal;
	--itlu-letter-spacing-action: normal;

	/* Spacing and widths. */
	--itlu-space-1: var(--wp--preset--spacing--2-xs, 0.25rem);
	--itlu-space-2: var(--wp--preset--spacing--xs, 0.5rem);
	--itlu-space-3: var(--wp--preset--spacing--sm, 0.75rem);
	--itlu-space-4: var(--wp--preset--spacing--md, 1rem);
	--itlu-space-5: 1.25rem;
	--itlu-space-6: var(--wp--preset--spacing--lg, 1.5rem);
	--itlu-space-7: var(--wp--preset--spacing--xl, 2rem);
	--itlu-space-8: var(--wp--preset--spacing--2-xl, 3rem);
	--itlu-space-9: var(--wp--preset--spacing--3-xl, 4rem);
	--itlu-section-space-sm: var(--wp--custom--itlu--section-space--sm, 1.5rem);
	--itlu-section-space-md: var(--wp--custom--itlu--section-space--md, 2rem);
	--itlu-section-space-lg: var(--wp--custom--itlu--section-space--lg, 4rem);
	--itlu-width-content: var(--wp--style--global--content-size, 760px);
	--itlu-width-wide: var(--wp--style--global--wide-size, 1200px);
	--itlu-width-reading: var(--wp--custom--itlu--width--reading, 42rem);
	--itlu-container-gutter: var(--itlu-space-4);

	/* Shape, elevation and interaction. */
	--itlu-radius-none: var(--wp--custom--itlu--radius--none, 0);
	--itlu-radius-sm: var(--wp--custom--itlu--radius--sm, 0.125rem);
	--itlu-radius-md: var(--wp--custom--itlu--radius--md, 0.25rem);
	--itlu-radius-lg: var(--wp--custom--itlu--radius--lg, 0.5rem);
	--itlu-radius-xl: var(--wp--custom--itlu--radius--xl, 1rem);
	--itlu-radius-pill: var(--wp--custom--itlu--radius--pill, 999px);
	--itlu-shadow-none: var(--wp--custom--itlu--shadow--none, none);
	--itlu-shadow-sm: var(--wp--custom--itlu--shadow--sm, 0 0.125rem 0.35rem rgb(0 0 0 / 10%));
	--itlu-shadow-md: var(--wp--custom--itlu--shadow--md, 0 0.35rem 1rem rgb(0 0 0 / 14%));
	--itlu-shadow-lg: var(--wp--custom--itlu--shadow--lg, 0 0.5rem 2rem rgb(0 0 0 / 18%));
	--itlu-border-width: var(--wp--custom--itlu--border--width, 1px);
	--itlu-border-width-prominent: var(--wp--custom--itlu--border--width-prominent, 2px);
	--itlu-border-style: var(--wp--custom--itlu--border--style, solid);
	--itlu-focus-width: var(--wp--custom--itlu--focus--width, 3px);
	--itlu-focus-offset: var(--wp--custom--itlu--focus--offset, 3px);
	--itlu-control-min-height: var(--wp--custom--itlu--control--min-height, 44px);
	--itlu-transition-fast: var(--wp--custom--itlu--transition--fast, 120ms ease-out);
	--itlu-media-overlay-flat: var(--wp--custom--itlu--overlay--flat, rgb(0 0 0 / 58%));
	--itlu-media-overlay: var(--wp--custom--itlu--overlay--strong, linear-gradient(90deg, rgb(0 0 0 / 82%), rgb(0 0 0 / 18%)));
	--itlu-media-overlay-bottom: var(--wp--custom--itlu--overlay--bottom, linear-gradient(0deg, rgb(0 0 0 / 82%), transparent 75%));
	--itlu-media-divider: color-mix(in srgb, currentcolor 35%, transparent);

	/* Deliberate component aliases. */
	--itlu-card-background: var(--itlu-color-surface-raised);
	--itlu-card-color: var(--itlu-color-text);
	--itlu-card-border-color: var(--itlu-color-border);
	--itlu-card-border-width: var(--itlu-border-width);
	--itlu-card-radius: var(--itlu-radius-none);
	--itlu-card-shadow: var(--itlu-shadow-none);
	--itlu-card-padding: var(--itlu-space-5);
	--itlu-header-background: var(--itlu-color-surface);
	--itlu-header-color: var(--itlu-color-text);
	--itlu-topbar-background: var(--itlu-color-surface-alt);
	--itlu-topbar-color: var(--itlu-color-text);
	--itlu-footer-background: var(--itlu-color-primary);
	--itlu-footer-color: var(--itlu-color-primary-contrast);
	--itlu-footer-border-color: color-mix(in srgb, var(--itlu-footer-color) 35%, transparent);
	--itlu-button-radius: var(--itlu-radius-none);
	--itlu-button-border-width: var(--itlu-border-width-prominent);
	--itlu-form-control-background: var(--itlu-color-surface);
	--itlu-form-control-color: var(--itlu-color-text);
	--itlu-form-control-border: var(--itlu-color-border-strong);
	--itlu-form-control-radius: var(--itlu-radius-none);
	--itlu-notice-accent: var(--itlu-color-primary);
	--itlu-notice-surface: var(--itlu-color-surface-alt);
	--itlu-lightbox-background: color-mix(in srgb, var(--itlu-color-text) 92%, #000);
	--itlu-lightbox-backdrop: rgb(0 0 0 / 85%);

	/* Compatibility aliases retained for 0.5 projects. */
	--itlu-color-accent: var(--itlu-color-primary);
	--itlu-color-base: var(--itlu-color-surface);
	--itlu-color-muted: var(--itlu-color-surface-alt);
	--itlu-color-contrast: var(--itlu-color-text);
	--itlu-font-sans: var(--itlu-font-family-body);
	--itlu-content: var(--itlu-width-content);
	--itlu-wide: var(--itlu-width-wide);
	--itlu-focus: var(--itlu-color-focus);
}

@media (forced-colors: active) {

	:root {
		--itlu-color-border: CanvasText;
		--itlu-color-border-strong: CanvasText;
		--itlu-color-focus: Highlight;
		--itlu-shadow-sm: none;
		--itlu-shadow-md: none;
		--itlu-shadow-lg: none;
	}
}