/*
====================================================================
BASE — استایل پایه، تایپوگرافی، چیدمان عمومی
====================================================================
نکته‌ی مهم RTL: در همه‌جا از خصوصیات منطقی CSS استفاده شده
(مثل margin-inline-start به‌جای margin-left) تا اگر زبان سایت
تغییر کرد یا قالب در زمینه‌ی LTR استفاده شد، چیزی دستی خراب نشود.
====================================================================
*/

body {
	font-family: var(--font-base);
	font-size: var(--font-size-base);
	line-height: var(--line-height-base);
	color: var(--color-ink);
	background-color: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-base);
	font-weight: 700;
	line-height: var(--line-height-tight);
	margin: 0 0 var(--space-3);
	color: var(--color-ink);
}

h1 { font-size: var(--font-size-2xl); }
h2 { font-size: var(--font-size-xl); }
h3 { font-size: var(--font-size-lg); }
h4 { font-size: var(--font-size-md); }

p {
	margin: 0 0 var(--space-4);
	color: var(--color-ink-soft);
}

a {
	transition: color var(--transition-fast);
}

a:hover {
	color: var(--color-primary);
}

/* فوکوس قابل‌مشاهده برای کیبورد — دسترس‌پذیری */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 2px;
	border-radius: var(--radius-sm);
}

/* ---------- Container ---------- */
.vitrin-container {
	width: 100%;
	max-width: var(--container-width);
	margin-inline: auto;
	padding-inline: var(--container-padding);
}

/* ---------- دکمه‌ها ---------- */
.vitrin-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	padding: var(--space-3) var(--space-5);
	border-radius: var(--radius-md);
	border: 1px solid transparent;
	font-size: var(--font-size-sm);
	font-weight: 600;
	cursor: pointer;
	transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), transform var(--transition-fast);
	white-space: nowrap;
}

.vitrin-btn:active {
	transform: translateY(1px);
}

.vitrin-btn--primary {
	background-color: var(--color-primary);
	color: #fff;
}

.vitrin-btn--primary:hover {
	background-color: var(--color-primary-hover);
	color: #fff;
}

.vitrin-btn--outline {
	background-color: transparent;
	border-color: var(--color-border-strong);
	color: var(--color-ink);
}

.vitrin-btn--outline:hover {
	border-color: var(--color-primary);
	color: var(--color-primary);
}

.vitrin-btn--ghost {
	background-color: transparent;
	color: var(--color-ink-soft);
}

.vitrin-btn--ghost:hover {
	background-color: var(--color-bg);
	color: var(--color-ink);
}

.vitrin-btn--sm {
	padding: var(--space-2) var(--space-3);
	font-size: var(--font-size-xs);
}

.vitrin-btn--block {
	width: 100%;
}

.vitrin-btn:disabled,
.vitrin-btn[aria-disabled="true"] {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ---------- برچسب‌ها / بج‌ها ---------- */
.vitrin-badge {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-1) var(--space-2);
	border-radius: var(--radius-pill);
	font-size: var(--font-size-xs);
	font-weight: 600;
	line-height: 1;
}

.vitrin-badge--accent {
	background-color: var(--color-accent-tint);
	color: var(--color-warning);
}

.vitrin-badge--danger {
	background-color: rgba(192, 57, 43, 0.1);
	color: var(--color-danger);
}

.vitrin-badge--success {
	background-color: var(--color-primary-tint);
	color: var(--color-success);
}

/* ---------- اسکیپ‌لینک دسترس‌پذیری ---------- */
.vitrin-skip-link {
	position: absolute;
	inset-inline-start: -9999px;
	top: 1rem;
	z-index: 9999;
	background: var(--color-ink);
	color: #fff;
	padding: var(--space-3) var(--space-4);
	border-radius: var(--radius-sm);
}

.vitrin-skip-link:focus {
	inset-inline-start: 1rem;
}

/* ---------- اسکرین‌ریدر-فقط ---------- */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
}

/* ---------- تصویر ظرف‌دار (پیشگیری از CLS) ---------- */
.vitrin-ratio-box {
	position: relative;
	width: 100%;
	overflow: hidden;
	background-color: var(--color-bg);
}

.vitrin-ratio-box::before {
	content: "";
	display: block;
	padding-top: var(--ratio, 100%);
}

.vitrin-ratio-box > img,
.vitrin-ratio-box > svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---------- موبایل ---------- */
@media (max-width: 768px) {
	:root {
		--container-padding: var(--space-3);
	}
}