@font-face {
	font-family: "Vazirmatn";
	src: url("../fonts/Vazirmatn%5Bwght%5D.woff2") format("woff2");
	font-weight: 100 900;
	font-style: normal;
	font-display: swap;
}

:root {
	/* DPcomputer v4 — blue/navy brand tokens. */
	--dpc-color-primary: #086af6;
	--dpc-color-primary-hover: #0759d1;
	--dpc-color-primary-active: #0648a8;
	--dpc-color-primary-subtle: #eff6ff;
	--dpc-color-graphite: #182130;
	--dpc-color-graphite-soft: #243247;
	--dpc-color-primary-on-dark: #8dbbff;
	--dpc-color-primary-border-soft: rgb(8 106 246 / 0.18);
	--dpc-color-surface-on-dark: rgb(255 255 255 / 0.06);

	--dpc-color-neutral-0: #ffffff;
	--dpc-color-neutral-50: #f8fafc;
	--dpc-color-neutral-100: #f2f4f7;
	--dpc-color-neutral-200: #eaecf0;
	--dpc-color-neutral-300: #d0d5dd;
	--dpc-color-neutral-400: #98a2b3;
	--dpc-color-neutral-500: #667085;
	--dpc-color-neutral-600: #525866;
	--dpc-color-neutral-700: #343a43;
	--dpc-color-neutral-800: #243247;
	--dpc-color-neutral-900: #182130;
	--dpc-color-neutral-950: #121417;

	--dpc-color-success: #167d3e;
	--dpc-color-success-soft: #ecfdf3;
	--dpc-color-warning: #b54708;
	--dpc-color-warning-soft: #fffaeb;
	--dpc-color-error: #b42318;
	--dpc-color-error-soft: #fef3f2;
	--dpc-color-info: #175cd3;
	--dpc-color-info-soft: #eff8ff;
	--dpc-color-overlay-backdrop: rgb(18 20 23 / 0.56);

	/* Compatibility aliases retained for approved pre-UI1 slices. */
	--dpc-color-secondary: var(--dpc-color-graphite);
	--dpc-color-page-bg: var(--dpc-color-neutral-50);
	--dpc-color-surface: var(--dpc-color-neutral-0);
	--dpc-color-text: var(--dpc-color-graphite);
	--dpc-color-text-secondary: var(--dpc-color-neutral-600);
	--dpc-color-text-muted: var(--dpc-color-neutral-500);
	--dpc-color-border: var(--dpc-color-neutral-200);
	--dpc-color-border-strong: var(--dpc-color-neutral-300);
	--dpc-color-border-control: var(--dpc-color-neutral-400);
	--dpc-color-focus: var(--dpc-color-primary);
	--dpc-color-subtle-navy: var(--dpc-color-neutral-100);
	--dpc-color-subtle-teal: var(--dpc-color-primary-subtle);

	--dpc-font-family: Vazirmatn, Tahoma, Arial, sans-serif;

	--dpc-space-1: 4px;
	--dpc-space-2: 8px;
	--dpc-space-3: 12px;
	--dpc-space-4: 16px;
	--dpc-space-5: 20px;
	--dpc-space-6: 24px;
	--dpc-space-8: 32px;
	--dpc-space-10: 40px;
	--dpc-space-12: 48px;
	--dpc-space-16: 64px;
	--dpc-space-20: 80px;
	--dpc-space-24: 96px;

	--dpc-space-xs: var(--dpc-space-1);
	--dpc-space-sm: var(--dpc-space-2);
	--dpc-space-md: var(--dpc-space-4);
	--dpc-space-lg: var(--dpc-space-6);
	--dpc-space-xl: var(--dpc-space-8);
	--dpc-space-2xl: var(--dpc-space-12);
	--dpc-space-3xl: var(--dpc-space-16);
	--dpc-space-4xl: var(--dpc-space-24);

	--dpc-radius-control: 8px;
	--dpc-radius-card: 12px;
	--dpc-radius-image: 12px;
	--dpc-radius-large: 16px;
	--dpc-radius-pill: 999px;

	--dpc-shadow-card-hover: 0 8px 24px rgb(18 20 23 / 0.08);
	--dpc-shadow-overlay: 0 16px 40px rgb(18 20 23 / 0.16);

	--dpc-control-small: 40px;
	--dpc-control-medium: 44px;
	--dpc-control-large: 48px;
	--dpc-control-commerce: 52px;

	--dpc-container-width: 1360px;
	--dpc-container-gutter: var(--dpc-space-4);

	--dpc-type-display-size: 32px;
	--dpc-type-display-line: 44px;
	--dpc-type-h1-size: 26px;
	--dpc-type-h1-line: 38px;
	--dpc-type-h2-size: 22px;
	--dpc-type-h2-line: 34px;
	--dpc-type-h3-size: 19px;
	--dpc-type-h3-line: 30px;
	--dpc-type-h4-size: 17px;
	--dpc-type-h4-line: 28px;
	--dpc-type-body-lg-size: 16px;
	--dpc-type-body-lg-line: 28px;
	--dpc-type-body-size: 14px;
	--dpc-type-body-line: 24px;
	--dpc-type-small-size: 13px;
	--dpc-type-small-line: 22px;
	--dpc-type-caption-size: 12px;
	--dpc-type-caption-line: 20px;
	--dpc-type-button-size: 14px;
	--dpc-type-button-line: 20px;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: var(--dpc-color-page-bg);
	color: var(--dpc-color-text);
	font-family: var(--dpc-font-family);
	font-size: var(--dpc-type-body-size);
	line-height: var(--dpc-type-body-line);
}
body, button, input, select, textarea { font-family: var(--dpc-font-family); }
img { max-inline-size: 100%; height: auto; }
a { color: inherit; }
button, input, select, textarea { font: inherit; }
bdi { unicode-bidi: isolate; }

h1, h2, h3, h4 { color: var(--dpc-color-graphite); }
h1 { font-size: var(--dpc-type-h1-size); line-height: var(--dpc-type-h1-line); font-weight: 700; }
h2 { font-size: var(--dpc-type-h2-size); line-height: var(--dpc-type-h2-line); font-weight: 700; }
h3 { font-size: var(--dpc-type-h3-size); line-height: var(--dpc-type-h3-line); font-weight: 700; }
h4 { font-size: var(--dpc-type-h4-size); line-height: var(--dpc-type-h4-line); font-weight: 600; }

:where(a, button, input, select, textarea, summary):focus-visible {
	outline: 3px solid var(--dpc-color-focus);
	outline-offset: 3px;
}

.screen-reader-text {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}
.screen-reader-text:focus {
	z-index: 100000;
	top: var(--dpc-space-2);
	inset-inline-start: var(--dpc-space-2);
	inline-size: auto;
	block-size: auto;
	padding: var(--dpc-space-3) var(--dpc-space-4);
	clip: auto;
	clip-path: none;
	background: var(--dpc-color-surface);
	border: 1px solid var(--dpc-color-border-strong);
	border-radius: var(--dpc-radius-control);
}

.dpc-container,
.dpc-site-main,
.dpc-site-footer__inner,
.dpc-breadcrumb__inner {
	inline-size: min(calc(100% - (2 * var(--dpc-container-gutter))), var(--dpc-container-width));
	margin-inline: auto;
}

/* Buttons: UI1 global primitive. Existing Woo controls keep native behavior. */
.dpc-button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-block-size: var(--dpc-control-medium);
	padding-inline: var(--dpc-space-4);
	padding-block: var(--dpc-space-2);
	border: 1px solid transparent;
	border-radius: var(--dpc-radius-control);
	font-size: var(--dpc-type-button-size);
	font-weight: 600;
	line-height: var(--dpc-type-button-line);
	text-decoration: none;
	cursor: pointer;
}
.dpc-button--small { min-block-size: var(--dpc-control-medium); } /* 40px visual token is reserved; 44px wins for touch accessibility. */
.dpc-button--large { min-block-size: var(--dpc-control-large); }
.dpc-button--commerce { min-block-size: var(--dpc-control-commerce); }
.dpc-button--primary,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt,
.woocommerce #respond input#submit.alt {
	background: var(--dpc-color-primary);
	color: var(--dpc-color-neutral-0);
}
.dpc-button--primary:hover,
.woocommerce a.button.alt:hover,
.woocommerce button.button.alt:hover,
.woocommerce input.button.alt:hover,
.woocommerce #respond input#submit.alt:hover {
	background: var(--dpc-color-primary-hover);
	color: var(--dpc-color-neutral-0);
}
.dpc-button--primary:active { background: var(--dpc-color-primary-active); }
.dpc-button--secondary {
	background: var(--dpc-color-neutral-0);
	color: var(--dpc-color-graphite);
	border-color: var(--dpc-color-neutral-300);
}
.dpc-button--secondary:hover { border-color: var(--dpc-color-neutral-400); background: var(--dpc-color-neutral-50); }
.dpc-button--ghost { background: transparent; color: var(--dpc-color-graphite); }
.dpc-button--ghost:hover { background: var(--dpc-color-neutral-100); }
.dpc-button--danger { background: var(--dpc-color-error); color: var(--dpc-color-neutral-0); }

/* Forms: reusable presentation primitives for this and later UI1 slices. */
.dpc-field { display: grid; gap: var(--dpc-space-2); }
.dpc-field__label { font-weight: 600; color: var(--dpc-color-graphite); }
.dpc-field__help { color: var(--dpc-color-neutral-500); font-size: var(--dpc-type-small-size); line-height: var(--dpc-type-small-line); }
.dpc-input,
.dpc-select,
.dpc-textarea {
	inline-size: 100%;
	min-block-size: 44px;
	padding-inline: var(--dpc-space-3);
	background: var(--dpc-color-neutral-0);
	color: var(--dpc-color-graphite);
	border: 1px solid var(--dpc-color-neutral-400);
	border-radius: var(--dpc-radius-control);
}
.dpc-textarea { min-block-size: 112px; padding-block: var(--dpc-space-3); resize: vertical; }
.dpc-input::placeholder,
.dpc-textarea::placeholder { color: var(--dpc-color-neutral-500); }
.dpc-input:hover,
.dpc-select:hover,
.dpc-textarea:hover { border-color: var(--dpc-color-neutral-600); }
.dpc-input:disabled,
.dpc-select:disabled,
.dpc-textarea:disabled { background: var(--dpc-color-neutral-100); color: var(--dpc-color-neutral-500); cursor: not-allowed; }
.dpc-choice {
	display: inline-flex;
	gap: var(--dpc-space-2);
	align-items: center;
	min-block-size: 44px;
	cursor: pointer;
}
.dpc-choice input[type="checkbox"],
.dpc-choice input[type="radio"],
.dpc-checkbox,
.dpc-radio {
	inline-size: 20px;
	block-size: 20px;
	margin: 0;
	accent-color: var(--dpc-color-primary);
}

/* Basic badges and alerts. Color is never the only carrier of meaning. */
.dpc-badge {
	display: inline-flex;
	align-items: center;
	min-block-size: 24px;
	padding-inline: var(--dpc-space-2);
	border-radius: var(--dpc-radius-pill);
	background: var(--dpc-color-neutral-100);
	color: var(--dpc-color-neutral-700);
	font-size: var(--dpc-type-caption-size);
	font-weight: 600;
	line-height: var(--dpc-type-caption-line);
}
.dpc-badge--brand { background: var(--dpc-color-primary-subtle); color: var(--dpc-color-primary-active); }
.dpc-badge--success { background: var(--dpc-color-success-soft); color: var(--dpc-color-success); }
.dpc-badge--warning { background: var(--dpc-color-warning-soft); color: var(--dpc-color-warning); }
.dpc-badge--error { background: var(--dpc-color-error-soft); color: var(--dpc-color-error); }
.dpc-badge--info { background: var(--dpc-color-info-soft); color: var(--dpc-color-info); }

.dpc-alert {
	display: flex;
	gap: var(--dpc-space-3);
	align-items: flex-start;
	padding: var(--dpc-space-3) var(--dpc-space-4);
	border: 1px solid var(--dpc-color-neutral-300);
	border-inline-start-width: 4px;
	border-radius: var(--dpc-radius-control);
	background: var(--dpc-color-neutral-0);
}
.dpc-alert--success { background: var(--dpc-color-success-soft); border-inline-start-color: var(--dpc-color-success); }
.dpc-alert--warning { background: var(--dpc-color-warning-soft); border-inline-start-color: var(--dpc-color-warning); }
.dpc-alert--error { background: var(--dpc-color-error-soft); border-inline-start-color: var(--dpc-color-error); }
.dpc-alert--info { background: var(--dpc-color-info-soft); border-inline-start-color: var(--dpc-color-info); }

.dpc-development-note { color: var(--dpc-color-text-muted); font-size: var(--dpc-type-small-size); line-height: var(--dpc-type-small-line); }

@media (min-width: 768px) {
	:root {
		--dpc-container-gutter: var(--dpc-space-6);
		--dpc-type-display-size: 40px;
		--dpc-type-display-line: 56px;
		--dpc-type-h1-size: 32px;
		--dpc-type-h1-line: 46px;
		--dpc-type-h2-size: 26px;
		--dpc-type-h2-line: 40px;
		--dpc-type-h3-size: 22px;
		--dpc-type-h3-line: 34px;
		--dpc-type-h4-size: 18px;
		--dpc-type-h4-line: 30px;
	}
}

@media (min-width: 1024px) {
	:root { --dpc-container-gutter: var(--dpc-space-8); }
}

@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;
	}
}

/* Shared micro-heading used across storefront and content surfaces. */
.dpc-section-kicker {
	margin: 0 0 var(--dpc-space-1);
	color: var(--dpc-color-primary);
	font-size: var(--dpc-type-caption-size);
	font-weight: 800;
	line-height: var(--dpc-type-caption-line);
}


/* 0.8.0 — runtime visual scale correction after HostDL browser evidence. */
@media (min-width: 1024px) {
	:root {
		--dpc-type-body-size: 15px;
		--dpc-type-body-line: 26px;
		--dpc-type-h2-size: 30px;
		--dpc-type-h2-line: 44px;
	}
}