/* ==========================================================================
   1. BASE.CSS - Shayan Bag Next-Gen RTL E-Commerce Design System
   100% Pure Vanilla CSS3 | Vazirmatn Typography | Zero Frameworks
   ========================================================================== */

:root {
    /* Primary Brand Palette (Crimson Rose & Deep Navy) */
    --dk-primary: #b47b38;
    --dk-primary-hover: #966227;
    --dk-primary-dark: #734818;
    --dk-primary-soft: rgba(180, 123, 56, 0.09);
    --dk-primary-border: rgba(180, 123, 56, 0.28);

    /* Secondary & Accent Colors */
    --dk-navy: #0f172a;
    --dk-navy-light: #2b3058;
    --dk-cyan: #2563eb;
    --dk-cyan-soft: rgba(37, 99, 235, 0.1);
    --dk-green: #0d9488;
    --dk-green-soft: rgba(13, 148, 136, 0.1);
    --dk-amber: #f59e0b;
    --dk-amber-soft: rgba(245, 158, 11, 0.14);

    /* Surfaces & Backgrounds */
    --dk-bg-page: #f8f6f2;
    --dk-surface: #ffffff;
    --dk-surface-muted: #f4f5f7;
    --dk-surface-elevated: #ffffff;

    /* Text Colors */
    --dk-text-primary: #0c0c0c;
    --dk-text-body: #3f4064;
    --dk-text-muted: #81858b;
    --dk-text-light: #a1a3a8;
    --dk-text-inverse: #ffffff;

    /* Borders & Radius */
    --dk-border: #e0e0e2;
    --dk-border-light: #ededf0;
    --dk-radius-xs: 6px;
    --dk-radius-sm: 10px;
    --dk-radius-md: 14px;
    --dk-radius-lg: 18px;
    --dk-radius-pill: 999px;

    /* Shadows */
    --dk-shadow-xs: 0 1px 3px rgba(12, 12, 12, 0.04);
    --dk-shadow-sm: 0 2px 8px rgba(12, 12, 12, 0.06);
    --dk-shadow-md: 0 8px 24px rgba(12, 12, 12, 0.09);
    --dk-shadow-lg: 0 14px 36px rgba(12, 12, 12, 0.14);
    --dk-shadow-header: 0 2px 14px rgba(12, 12, 12, 0.06);

    /* Spacing Scale */
    --dk-space-1: 4px;
    --dk-space-2: 8px;
    --dk-space-3: 12px;
    --dk-space-4: 16px;
    --dk-space-5: 20px;
    --dk-space-6: 24px;
    --dk-space-8: 32px;
    --dk-space-10: 40px;

    /* Typography & Transitions */
    --dk-font: 'Vazirmatn', 'IRANYekan', 'Tahoma', -apple-system, BlinkMacSystemFont, sans-serif;
    --dk-transition: 0.22s cubic-bezier(0.4, 0, 0.2, 1);

    /* Layout Dimensions */
    --dk-container-max: 1420px;
    --dk-header-height: 126px;
    --dk-mobile-nav-height: 66px;
}

/* Reset */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    direction: rtl;
    font-family: var(--dk-font);
    font-size: 14px;
    line-height: 1.75;
    color: var(--dk-text-body);
    background-color: var(--dk-bg-page);
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-font-smoothing: antialiased;
}

body {
    font-family: var(--dk-font);
    color: var(--dk-text-body);
    background-color: var(--dk-bg-page);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
}

input,
button,
select,
textarea,
optgroup {
    font-family: var(--dk-font);
    font-size: inherit;
    line-height: inherit;
    color: inherit;
}

button {
    cursor: pointer;
    background: none;
    border: none;
}

a {
    color: inherit;
    text-decoration: none;
    transition: color var(--dk-transition);
}

ul,
ol {
    list-style: none;
}

img,
svg,
video {
    max-width: 100%;
    height: auto;
    display: block;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--dk-text-primary);
    font-weight: 800;
    line-height: 1.5;
}

/* Custom Scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 6px;
}

::-webkit-scrollbar-track {
    background: var(--dk-bg-page);
}

::-webkit-scrollbar-thumb {
    background: #c4c6cc;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--dk-text-muted);
}

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

/* Utility Classes */
.text-primary { color: var(--dk-primary) !important; }
.text-cyan { color: var(--dk-cyan) !important; }
.text-success { color: var(--dk-green) !important; }
.text-muted { color: var(--dk-text-muted) !important; }
.text-dark { color: var(--dk-text-primary) !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align: left !important; }
.dir-ltr { direction: ltr !important; }
.dir-rtl { direction: rtl !important; }
.fw-bold { font-weight: 700 !important; }
.fw-extrabold { font-weight: 800 !important; }
.fw-medium { font-weight: 500 !important; }
.w-100 { width: 100% !important; }
.d-none { display: none !important; }
.d-flex { display: flex !important; }
.flex-wrap { flex-wrap: wrap !important; }
.align-center { align-items: center !important; }
.justify-between { justify-content: space-between !important; }
.justify-center { justify-content: center !important; }
.gap-1 { gap: var(--dk-space-1) !important; }
.gap-2 { gap: var(--dk-space-2) !important; }
.gap-3 { gap: var(--dk-space-3) !important; }
.gap-4 { gap: var(--dk-space-4) !important; }
.mt-1 { margin-top: var(--dk-space-1) !important; }
.mt-2 { margin-top: var(--dk-space-2) !important; }
.mt-3 { margin-top: var(--dk-space-3) !important; }
.mt-4 { margin-top: var(--dk-space-4) !important; }
.mb-1 { margin-bottom: var(--dk-space-1) !important; }
.mb-2 { margin-bottom: var(--dk-space-2) !important; }
.mb-3 { margin-bottom: var(--dk-space-3) !important; }
.mb-4 { margin-bottom: var(--dk-space-4) !important; }
.p-2 { padding: var(--dk-space-2) !important; }
.p-3 { padding: var(--dk-space-3) !important; }
.p-4 { padding: var(--dk-space-4) !important; }
.py-3 { padding-block: var(--dk-space-3) !important; }
.py-4 { padding-block: var(--dk-space-4) !important; }
.pb-2 { padding-bottom: var(--dk-space-2) !important; }
.pb-3 { padding-bottom: var(--dk-space-3) !important; }
.pt-2 { padding-top: var(--dk-space-2) !important; }
.pt-3 { padding-top: var(--dk-space-3) !important; }