/*
 * DIR UI system tokens.
 *
 * The variables live inside explicit opt-in scopes so legacy views cannot
 * inherit them by accident.
 */
.dir-ui,
.dir-ui-site-header,
.dir-ui-site-footer {
	/* Brand */
	--dir-ui-color-brand-primary: #019b23;
	--dir-ui-color-brand-accessible: #087a28;
	--dir-ui-color-brand-dark: #0b3d1b;
	--dir-ui-color-brand-soft: #e8f3ea;
	--dir-ui-color-brand-on-dark: #aee8ba;
	--dir-ui-color-accent: #ff8a00;
	--dir-ui-color-accent-dark: #b85c00;

	/* Neutrals */
	--dir-ui-color-neutral-0: #fff;
	--dir-ui-color-neutral-50: #f7f9f7;
	--dir-ui-color-neutral-100: #eef1ee;
	--dir-ui-color-neutral-200: #dde3de;
	--dir-ui-color-neutral-300: #c5cec7;
	--dir-ui-color-neutral-400: #8d9a90;
	--dir-ui-color-neutral-500: #5d685f;
	--dir-ui-color-neutral-600: #465149;
	--dir-ui-color-neutral-700: #323b35;
	--dir-ui-color-neutral-800: #252d27;
	--dir-ui-color-neutral-900: #17201a;

	/* Semantic color */
	--dir-ui-color-text: var(--dir-ui-color-neutral-900);
	--dir-ui-color-text-muted: var(--dir-ui-color-neutral-500);
	--dir-ui-color-text-inverse: var(--dir-ui-color-neutral-0);
	--dir-ui-color-background: var(--dir-ui-color-neutral-0);
	--dir-ui-color-background-soft: var(--dir-ui-color-neutral-50);
	--dir-ui-color-surface: var(--dir-ui-color-neutral-0);
	--dir-ui-color-surface-inverse: var(--dir-ui-color-neutral-900);
	--dir-ui-color-border: var(--dir-ui-color-neutral-200);
	--dir-ui-color-border-strong: var(--dir-ui-color-neutral-400);
	--dir-ui-color-focus: var(--dir-ui-color-accent);
	--dir-ui-color-success: #087a28;
	--dir-ui-color-success-background: #e8f3ea;
	--dir-ui-color-warning: #b85c00;
	--dir-ui-color-warning-background: #fff3dc;
	--dir-ui-color-error: #b42318;
	--dir-ui-color-error-background: #fef0ee;
	--dir-ui-color-info: #1769aa;
	--dir-ui-color-info-background: #edf6fd;

	/* Typography */
	--dir-ui-font-heading: "DIR Manrope", "Arial Narrow", Arial, sans-serif;
	--dir-ui-font-body: "DIR Source Sans 3", "Segoe UI", Arial, sans-serif;
	--dir-ui-font-mono: "SFMono-Regular", Consolas, monospace;
	--dir-ui-font-size-100: 0.75rem;
	--dir-ui-font-size-200: 0.8125rem;
	--dir-ui-font-size-300: 0.9375rem;
	--dir-ui-font-size-400: 1.0625rem;
	--dir-ui-font-size-500: 1.25rem;
	--dir-ui-font-size-600: 1.5rem;
	--dir-ui-font-size-700: 1.875rem;
	--dir-ui-font-size-800: 2.375rem;
	--dir-ui-font-size-900: 3rem;
	--dir-ui-font-size-1000: 4rem;
	--dir-ui-line-height-tight: 1.06;
	--dir-ui-line-height-heading: 1.18;
	--dir-ui-line-height-body: 1.6;
	--dir-ui-line-height-compact: 1.4;
	--dir-ui-font-weight-regular: 400;
	--dir-ui-font-weight-medium: 500;
	--dir-ui-font-weight-semibold: 650;
	--dir-ui-font-weight-bold: 700;
	--dir-ui-letter-spacing-tight: -0.035em;
	--dir-ui-letter-spacing-label: 0.12em;

	/* Spacing */
	--dir-ui-space-1: 0.25rem;
	--dir-ui-space-2: 0.5rem;
	--dir-ui-space-3: 0.75rem;
	--dir-ui-space-4: 1rem;
	--dir-ui-space-6: 1.5rem;
	--dir-ui-space-8: 2rem;
	--dir-ui-space-12: 3rem;
	--dir-ui-space-16: 4rem;
	--dir-ui-space-20: 5rem;
	--dir-ui-space-24: 6rem;
	--dir-ui-space-32: 8rem;

	/* Layout */
	--dir-ui-container-max: 80rem;
	--dir-ui-container-padding: 2.5rem;
	--dir-ui-grid-columns: 12;
	--dir-ui-grid-gutter: 1.5rem;

	/* Shape and depth */
	--dir-ui-radius-xs: 0.125rem;
	--dir-ui-radius-sm: 0.25rem;
	--dir-ui-radius-md: 0.5rem;
	--dir-ui-radius-lg: 0.75rem;
	--dir-ui-radius-xl: 1.25rem;
	--dir-ui-radius-full: 999px;
	--dir-ui-button-radius: var(--dir-ui-radius-sm);
	--dir-ui-border: 1px solid var(--dir-ui-color-border);
	--dir-ui-border-strong: 1px solid var(--dir-ui-color-border-strong);
	--dir-ui-shadow-sm: 0 1px 2px rgb(11 61 27 / 0.07), 0 2px 6px rgb(23 32 26 / 0.04);
	--dir-ui-shadow-md: 0 8px 24px rgb(23 32 26 / 0.09);
	--dir-ui-shadow-lg: 0 20px 56px rgb(23 32 26 / 0.12);

	/* Motion and layer */
	--dir-ui-duration-fast: 120ms;
	--dir-ui-duration-normal: 200ms;
	--dir-ui-duration-slow: 320ms;
	--dir-ui-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
	--dir-ui-transition-fast: var(--dir-ui-duration-fast) var(--dir-ui-ease);
	--dir-ui-transition-normal: var(--dir-ui-duration-normal) var(--dir-ui-ease);
	--dir-ui-z-sticky: 20;
	--dir-ui-z-overlay: 40;
}

@media (max-width: 1023px) {
	.dir-ui,
	.dir-ui-site-header,
	.dir-ui-site-footer {
		--dir-ui-container-padding: 2rem;
		--dir-ui-grid-columns: 8;
		--dir-ui-grid-gutter: 1.25rem;
	}
}

@media (max-width: 767px) {
	.dir-ui,
	.dir-ui-site-header,
	.dir-ui-site-footer {
		--dir-ui-container-padding: 1.25rem;
		--dir-ui-grid-columns: 4;
		--dir-ui-grid-gutter: 1rem;
	}
}