/* =========================================================
   ساخت‌یار | Theme Tokens
   فایل مشترک رنگ، فونت، سایه، شعاع و اندازه‌ها
   مناسب استفاده در تمام صفحات سایت
   ========================================================= */

:root {
    /* =====================================================
       فونت‌ها
       ===================================================== */
    --font-base: "Vazirmatn", Tahoma, Arial, sans-serif;
    --font-mono: "Vazirmatn", Tahoma, sans-serif;

    /* =====================================================
       رنگ‌های پایه
       ===================================================== */
    --color-white: #ffffff;
    --color-bg: #ffffff;
    --color-surface: #f8f8f6;
    --color-surface-2: #f2f1ed;
    --color-surface-3: #ebe8e1;

    /* =====================================================
       رنگ متن
       ===================================================== */
    --color-text: #171a18;
    --color-text-soft: #3f4640;
    --color-muted: #5f645c;
    --color-muted-light: #737869;

    /* =====================================================
       رنگ اصلی برند
       تراکوتا برای CTA و اقدام‌های فروشگاهی
       ===================================================== */
    --color-primary: #b85c38;
    --color-primary-dark: #9a4b2c;
    --color-primary-darker: #853f25;
    --color-primary-soft: #fff2ec;
    --color-primary-border: #f3d2c3;

    /* =====================================================
       رنگ ثانویه برند
       زیتونی برای اعتماد، هدر، کارت‌های رسمی
       ===================================================== */
    --color-secondary: #24372f;
    --color-secondary-dark: #18251f;
    --color-secondary-soft: #eef3f0;
    --color-secondary-border: #d7e0da;

    /* =====================================================
       رنگ تأکیدی
       لیمویی برای badge، highlight، وضعیت ویژه
       ===================================================== */
    --color-accent: #d9e84a;
    --color-accent-dark: #bed032;
    --color-accent-soft: rgba(217, 232, 74, 0.18);

    /* =====================================================
       رنگ‌های حالت
       ===================================================== */
    --color-success: #1f8a5b;
    --color-success-soft: #e8f7ef;
    --color-warning: #b9791b;
    --color-warning-soft: #fff5e4;
    --color-danger: #c0392b;
    --color-danger-soft: #fdecea;
    --color-info: #2f7d8c;
    --color-info-soft: #e9f6f8;

    /* =====================================================
       حاشیه‌ها
       ===================================================== */
    --color-border: #e8e2d8;
    --color-border-strong: #d7d0c4;
    --color-border-light: #f0ede6;

    /* =====================================================
       شعاع‌ها
       ===================================================== */
    --radius-xs: 6px;
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 22px;
    --radius-2xl: 28px;
    --radius-full: 999px;

    /* =====================================================
       سایه‌ها
       سبک و فروشگاهی
       ===================================================== */
    --shadow-xs: 0 1px 2px rgba(23, 26, 24, 0.05);
    --shadow-sm: 0 2px 8px rgba(23, 26, 24, 0.06);
    --shadow-md: 0 10px 28px rgba(23, 26, 24, 0.08);
    --shadow-lg: 0 18px 45px rgba(23, 26, 24, 0.12);
    --shadow-focus: 0 0 0 4px rgba(184, 92, 56, 0.14);

    /* =====================================================
       Container
       ===================================================== */
    --container-max: 1320px;
    --container-pad: 24px;

    /* =====================================================
       Transition
       ===================================================== */
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-standard: cubic-bezier(0.32, 0.72, 0.24, 1);
    --transition-fast: 160ms;
    --transition-base: 260ms;
    --transition-slow: 520ms;

    /* =====================================================
       Z-index
       ===================================================== */
    --z-header: 1000;
    --z-dropdown: 1100;
    --z-modal: 2000;
    --z-toast: 3000;
}

/* =========================================================
   Base helpers
   فقط ابزارهای کوچک و بی‌خطر
   ========================================================= */

.site-container {
    width: 100%;
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-pad);
}

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

.text-muted {
    color: var(--color-muted);
}

.surface-card {
    background: var(--color-white);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

/* =========================================================
   Buttons مشترک
   ========================================================= */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 20px;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    font-family: var(--font-base);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--transition-fast) var(--ease-standard),
        color var(--transition-fast) var(--ease-standard),
        border-color var(--transition-fast) var(--ease-standard),
        box-shadow var(--transition-fast) var(--ease-standard),
        transform var(--transition-fast) var(--ease-standard);
}

.btn:focus-visible {
    outline: none;
    box-shadow: var(--shadow-focus);
}

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

.btn--primary {
    background: var(--color-primary);
    color: var(--color-white);
    box-shadow: 0 8px 20px rgba(184, 92, 56, 0.18);
}

.btn--primary:hover {
    background: var(--color-primary-dark);
}

.btn--secondary {
    background: var(--color-secondary);
    color: var(--color-white);
}

.btn--secondary:hover {
    background: var(--color-secondary-dark);
}

.btn--light {
    background: var(--color-white);
    color: var(--color-secondary);
    border-color: var(--color-border);
}

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

.btn--ghost {
    background: transparent;
    color: var(--color-text);
    border-color: var(--color-border);
}

.btn--ghost:hover {
    background: var(--color-surface);
    border-color: var(--color-border-strong);
}

.btn--sm {
    min-height: 38px;
    padding: 8px 14px;
    font-size: 13px;
    border-radius: var(--radius-sm);
}

.btn--lg {
    min-height: 52px;
    padding: 14px 28px;
    font-size: 15px;
    border-radius: var(--radius-lg);
}

/* =========================================================
   Badges مشترک
   ========================================================= */

.badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: var(--radius-full);
    font-size: 12px;
    font-weight: 700;
    line-height: 1;
    white-space: nowrap;
}

.badge--primary {
    background: var(--color-primary-soft);
    color: var(--color-primary-dark);
}

.badge--secondary {
    background: var(--color-secondary-soft);
    color: var(--color-secondary);
}

.badge--accent {
    background: var(--color-accent-soft);
    color: var(--color-secondary);
}

.badge--danger {
    background: var(--color-danger-soft);
    color: var(--color-danger);
}

.badge--success {
    background: var(--color-success-soft);
    color: var(--color-success);
}

/* =========================================================
   Reduced motion
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* =========================================================
   Touch targets (mobile) — حداقل ۴۰ پیکسل برای لینک‌ها و دکمه‌های کوچک
   ========================================================= */
@media (max-width: 767px) {
    html body .site-header__top-links a,
    html body [class*="breadcrumb"] a,
    html body .site-footer a[class*="nav-link"],
    html body .site-footer a[class*="link"],
    html body .fq-pill,
    html body .cart-item__qty-btn,
    html body .cart-item__qty-input {
        display: inline-flex;
        align-items: center;
        min-height: 40px;
    }

    html body .cart-item__qty-btn {
        min-width: 40px;
        justify-content: center;
    }
}

/* ── تقویم شمسی (jalalidatepicker) با رنگ‌های برند ── */
html body jdp-container {
    --jdp-primary: #b85c38;
    --jdp-color-5: #24372f;
    font-family: 'Vazirmatn', Tahoma, sans-serif;
    border-radius: 12px;
}