:root {
	/* Brand and data-visualization primitives. */
	--zd-color-navy-deep: #071a2b;
	--zd-color-navy: #0b2b40;
	--zd-color-primary: #11b7a3;
	--zd-color-primary-dark: #078f80;
	--zd-color-primary-light: #5de1d1;
	--zd-color-blue: #2f80ed;
	--zd-color-purple: #7657ff;
	--zd-color-danger: #e24a5a;
	--zd-color-success: #16866f;
	--zd-color-warning: #b56a09;
	--zd-color-white: #ffffff;
	--zd-color-surface: #f6f8fa;
	--zd-color-surface-raised: #ffffff;
	--zd-color-surface-muted: #eef2f5;
	--zd-color-border: #dce4e9;
	--zd-color-border-strong: #bdcbd4;
	--zd-color-text: #1b2b38;
	--zd-color-muted: #5d7180;
	--zd-color-text-inverse: #ffffff;
	--zd-color-muted-inverse: rgb(255 255 255 / 74%);
	--zd-color-interactive: var(--zd-color-blue);
	--zd-color-interactive-hover: var(--zd-color-primary-dark);

	/* Self-hosted Vazirmatn provides a formal Persian UI with safe system fallbacks. */
	--zd-font-family: "Vazirmatn", Tahoma, Arial, sans-serif;
	--zd-font-size-xs: 0.75rem;
	--zd-font-size-sm: 0.875rem;
	--zd-font-size-base: 1rem;
	--zd-font-size-lg: 1.125rem;
	--zd-font-size-xl: 1.25rem;
	--zd-heading-1: clamp(2.125rem, 4.5vw, 3.75rem);
	--zd-heading-2: clamp(1.75rem, 3.2vw, 2.75rem);
	--zd-heading-3: clamp(1.5rem, 2.5vw, 2rem);
	--zd-heading-4: clamp(1.125rem, 1.5vw, 1.25rem);
	--zd-font-weight-regular: 400;
	--zd-font-weight-medium: 500;
	--zd-font-weight-semibold: 600;
	--zd-font-weight-bold: 700;
	--zd-line-height-tight: 1.45;
	--zd-line-height-ui: 1.5;
	--zd-line-height-body: 1.85;

	/* Layout, grid and responsive reference values. Custom properties document breakpoints;
	 * media queries continue to use literal values because CSS variables are invalid there. */
	--zd-container: 1200px;
	--zd-container-narrow: 960px;
	--zd-content: 760px;
	--zd-gutter: clamp(16px, 4vw, 32px);
	--zd-grid-gap: clamp(20px, 3vw, 32px);
	--zd-breakpoint-wide: 1200px;
	--zd-breakpoint-tablet: 1024px;
	--zd-breakpoint-mobile: 767px;
	--zd-breakpoint-small: 480px;

	/* Four-pixel spacing scale. */
	--zd-space-0: 0;
	--zd-space-1: 4px;
	--zd-space-2: 8px;
	--zd-space-3: 12px;
	--zd-space-4: 16px;
	--zd-space-5: 20px;
	--zd-space-6: 24px;
	--zd-space-8: 32px;
	--zd-space-10: 40px;
	--zd-space-12: 48px;
	--zd-space-16: 64px;
	--zd-space-20: 80px;
	--zd-space-24: 96px;
	--zd-space-28: 112px;
	--zd-space-32: 128px;

	/* Shape and restrained Material-inspired elevation. */
	--zd-radius-xs: 4px;
	--zd-radius-sm: 8px;
	--zd-radius-md: 12px;
	--zd-radius-lg: 20px;
	--zd-radius-pill: 999px;
	--zd-shadow-none: none;
	--zd-shadow-sm: 0 2px 8px rgb(7 26 43 / 5%), 0 1px 2px rgb(7 26 43 / 4%);
	--zd-shadow-md: 0 10px 24px rgb(7 26 43 / 8%), 0 2px 5px rgb(7 26 43 / 4%);
	--zd-shadow-lg: 0 20px 48px rgb(7 26 43 / 11%);

	/* Motion is intentionally subtle and disabled below for reduced-motion users. */
	--zd-transition-fast: 180ms ease;
	--zd-transition: 240ms ease;
	--zd-transition-slow: 360ms ease;
	--zd-focus-ring: 0 0 0 3px rgb(93 225 209 / 45%);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--zd-color-white);
	color: var(--zd-color-text);
	font-family: var(--zd-font-family);
	font-size: var(--zd-font-size-base);
	font-weight: var(--zd-font-weight-regular);
	line-height: var(--zd-line-height-body);
	-webkit-font-smoothing: antialiased;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	margin-block: 0 0.65em;
	color: var(--zd-color-navy-deep);
	font-weight: var(--zd-font-weight-bold);
	line-height: var(--zd-line-height-tight);
}

h1 { font-size: var(--zd-heading-1); }
h2 { font-size: var(--zd-heading-2); }
h3 { font-size: var(--zd-heading-3); }
h4 { font-size: var(--zd-heading-4); }
h5 { font-size: var(--zd-font-size-base); }
h6 { font-size: var(--zd-font-size-sm); }
p, ul, ol, blockquote { margin-block: 0 1.5em; }
img, svg, video { display: block; max-width: 100%; height: auto; }

a {
	color: var(--zd-color-interactive);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
	transition: color var(--zd-transition-fast);
}

a:hover { color: var(--zd-color-interactive-hover); }
button, input, select, textarea { font: inherit; }
button, [type="button"], [type="submit"] { cursor: pointer; }
::selection { background: var(--zd-color-primary-light); color: var(--zd-color-navy-deep); }

:focus-visible {
	outline: 2px solid var(--zd-color-primary-dark);
	outline-offset: 3px;
	box-shadow: var(--zd-focus-ring);
}

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.screen-reader-text:focus {
	top: var(--zd-space-2);
	inset-inline-start: var(--zd-space-2);
	z-index: 100000;
	width: auto;
	height: auto;
	padding: var(--zd-space-3) var(--zd-space-4);
	clip: auto;
	border-radius: var(--zd-radius-sm);
	background: var(--zd-color-white);
	color: var(--zd-color-navy-deep);
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		scroll-behavior: auto !important;
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
}