/* ============================================================
   DIWANCHO INDUSTRIAL PREMIUM — Design Tokens
   تمام متغیرهای بصری سیستم از این فایل می‌آیند.
   تم‌ها با data-theme="dark" روی <html> سوییچ می‌شوند.
   ============================================================ */

/* ---------- فونت محلی Vazirmatn (variable font) ---------- */
@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/vazirmatn-arabic.05d9ce2a23d3.woff2") format("woff2");
    unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891,
                   U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011,
                   U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/vazirmatn-latin.e7eada615dc3.woff2") format("woff2");
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6,
                   U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122,
                   U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
    font-family: "Vazirmatn";
    font-style: normal;
    font-weight: 300 900;
    font-display: swap;
    src: url("../fonts/vazirmatn-latin-ext.2b9f461883fd.woff2") format("woff2");
    unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB,
                   U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* ============================================================
   1) LIGHT THEME (پیش‌فرض)
   ============================================================ */
:root,
[data-theme="light"] {
    /* ---- سطوح ---- */
    --dw-bg:           #F6F4EF;   /* Off White */
    --dw-surface:      #FFFFFF;
    --dw-surface-2:    #F1EEE7;   /* سطوح ثانویه (header جدول، hover) */
    --dw-surface-3:    #EAE6DE;
    --dw-inset:        #EFECE4;

    /* ---- متن ---- */
    --dw-text:         #26221C;   /* Deep Charcoal */
    --dw-text-2:       #4A443B;
    --dw-muted:        #6B655C;
    --dw-faint:        #948C80;

    /* ---- برند (طلایی فقط Accent) ---- */
    --dw-gold:         #C9A961;
    --dw-gold-dark:    #A68649;
    --dw-gold-deep:    #8A6F39;
    --dw-gold-soft:    rgba(201, 169, 97, .12);
    --dw-gold-line:    rgba(201, 169, 97, .32);

    /* ---- خطوط ---- */
    --dw-border:       #E2DCD0;
    --dw-border-strong:#D3CCBD;
    --dw-divider:      #EDE8DF;

    /* ---- وضعیت‌ها (محدود و استاندارد) ---- */
    --dw-ok:           #2E7D5B;
    --dw-ok-bg:        rgba(46, 125, 91, .10);
    --dw-warn:         #B0741F;
    --dw-warn-bg:      rgba(176, 116, 31, .11);
    --dw-danger:       #B4402F;
    --dw-danger-bg:    rgba(180, 64, 47, .09);
    --dw-info:         #3E6E8E;
    --dw-info-bg:      rgba(62, 110, 142, .10);
    --dw-neutral:      #6B655C;
    --dw-neutral-bg:   rgba(107, 101, 92, .10);

    /* ---- سایه‌ها (ظریف، صنعتی) ---- */
    --dw-shadow-xs:    0 1px 2px rgba(38, 34, 28, .05);
    --dw-shadow-sm:    0 1px 3px rgba(38, 34, 28, .06), 0 1px 2px rgba(38, 34, 28, .04);
    --dw-shadow-md:    0 4px 12px rgba(38, 34, 28, .07), 0 1px 3px rgba(38, 34, 28, .04);
    --dw-shadow-lg:    0 12px 28px rgba(38, 34, 28, .11), 0 3px 8px rgba(38, 34, 28, .06);
    --dw-ring:         0 0 0 3px var(--dw-gold-soft);

    /* ---- شعاع ---- */
    --dw-radius-xs:    6px;
    --dw-radius-sm:    9px;
    --dw-radius-md:    13px;
    --dw-radius-lg:    17px;
    --dw-radius-pill:  999px;

    /* ---- فاصله (scale 4px) ---- */
    --dw-space-1:      .25rem;
    --dw-space-2:      .5rem;
    --dw-space-3:      .75rem;
    --dw-space-4:      1rem;
    --dw-space-5:      1.25rem;
    --dw-space-6:      1.5rem;
    --dw-space-7:      2rem;
    --dw-space-8:      2.5rem;
    --dw-space-9:      3.5rem;

    /* ---- تایپوگرافی ---- */
    --dw-font:         "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
    --dw-font-mono:    "SFMono-Regular", Consolas, "Liberation Mono", monospace;
    --dw-fs-xs:        .72rem;
    --dw-fs-sm:        .82rem;
    --dw-fs-base:      .9rem;
    --dw-fs-md:        .95rem;
    --dw-fs-lg:        1.05rem;
    --dw-fs-xl:        1.2rem;
    --dw-fs-2xl:       1.5rem;
    --dw-fs-3xl:       2rem;
    --dw-lh-tight:     1.35;
    --dw-lh:           1.75;
    --dw-fw-normal:    400;
    --dw-fw-medium:    500;
    --dw-fw-semibold:  600;
    --dw-fw-bold:      700;
    --dw-fw-black:     800;

    /* ---- حرکت (سریع: ۱۵۰–۲۵۰ms) ---- */
    --dw-t-fast:       150ms cubic-bezier(.4, 0, .2, 1);
    --dw-t:            200ms cubic-bezier(.4, 0, .2, 1);
    --dw-t-slow:       250ms cubic-bezier(.4, 0, .2, 1);

    /* ---- لایه‌بندی ---- */
    --dw-navbar-h:     58px;
    --dw-sidebar-w:    246px;
    --dw-sidebar-collapsed-w: 68px;
    --dw-content-max:  1560px;

    /* ---- z-index ---- */
    --dw-z-sidebar:    1030;
    --dw-z-navbar:     1040;
    --dw-z-dropdown:   1050;
    --dw-z-sticky:     1060;
    --dw-z-modal:      1090;
    --dw-z-toast:      1110;

    /* ---- جداول ---- */
    --dw-table-hover:  #FAF8F2;

    /* ---- سایدبار (Dark Industrial حتی در تم روشن) ---- */
    --dw-side-bg:      #1C1915;
    --dw-side-bg-2:    #221E19;
    --dw-side-text:    #B7AE9F;
    --dw-side-text-active: #FFFFFF;
    --dw-side-active:  rgba(201, 169, 97, .14);
    --dw-side-hover:   rgba(255, 255, 255, .05);
    --dw-side-border:  rgba(255, 255, 255, .07);
}

/* ============================================================
   5) 3D DEPTH SYSTEM — توکن‌های عمق و لایه‌بندی سه‌بعدی
   از این توکن‌ها برای depth حرفه‌ای استفاده کن، نه سایه پراکنده.
   ============================================================ */
:root,
[data-theme="light"] {
    /* ---- Elevation: سایه لایه‌ای (contact + direct + ambient) ---- */
    --dw-elev-1: 0 1px 2px rgba(38,34,28,.10),
                 0 2px 6px rgba(38,34,28,.06),
                 0 8px 20px -8px rgba(38,34,28,.10);
    --dw-elev-2: 0 2px 4px rgba(38,34,28,.10),
                 0 6px 14px rgba(38,34,28,.08),
                 0 16px 32px -10px rgba(38,34,28,.16);
    --dw-elev-3: 0 4px 8px rgba(38,34,28,.10),
                 0 10px 24px rgba(38,34,28,.10),
                 0 24px 48px -12px rgba(38,34,28,.20);
    --dw-elev-4: 0 8px 16px rgba(38,34,28,.12),
                 0 20px 40px rgba(38,34,28,.12),
                 0 40px 80px -20px rgba(38,34,28,.26);

    /* ---- لبهٔ نورانی بالا (حس سطح برآمده) ---- */
    --dw-edge-light: inset 0 1px 0 rgba(255,255,255,.70);
    --dw-edge-dark:  inset 0 -1px 0 rgba(38,34,28,.07);

    /* ---- دکمهٔ سه‌بعدی (لبهٔ پایین = ارتفاع) ---- */
    --dw-btn-edge:       inset 0 1px 0 rgba(255,255,255,.32),
                         inset 0 -2px 0 rgba(0,0,0,.14);
    --dw-btn-edge-press: inset 0 1px 0 rgba(255,255,255,.18),
                         inset 0 -1px 0 rgba(0,0,0,.20);
    --dw-gold-glow:        0 6px 16px -4px rgba(201,169,97,.45);
    --dw-gold-glow-strong: 0 12px 28px -4px rgba(201,169,97,.55);

    /* ---- شیشه (glass) ---- */
    --dw-glass-bg:     rgba(255,255,255,.72);
    --dw-glass-border: rgba(255,255,255,.60);
    --dw-glass-blur:   14px;

    /* ---- گرادیان سطح (بعد ملایم) ---- */
    --dw-surface-grad: linear-gradient(180deg, rgba(255,255,255,.65), rgba(255,255,255,0) 42%);
    --dw-gold-grad:    linear-gradient(135deg, var(--dw-gold), var(--dw-gold-dark) 55%, var(--dw-gold-deep));

    /* ---- hover lift ---- */
    --dw-lift: -2px;
}

/* ============================================================
   2) DARK THEME
   ============================================================ */
[data-theme="dark"] {
    --dw-bg:           #171512;   /* Dark Surface */
    --dw-surface:      #211D18;
    --dw-surface-2:    #292520;
    --dw-surface-3:    #332E28;
    --dw-inset:        #1A1713;

    --dw-text:         #F0EBE1;
    --dw-text-2:       #D6CFC2;
    --dw-muted:        #A79F91;
    --dw-faint:        #7D766B;

    --dw-gold:         #D4B878;
    --dw-gold-dark:    #C9A961;
    --dw-gold-deep:    #A68649;
    --dw-gold-soft:    rgba(212, 184, 120, .14);
    --dw-gold-line:    rgba(212, 184, 120, .30);

    --dw-border:       #38322A;
    --dw-border-strong:#463F35;
    --dw-divider:      #2E2923;

    --dw-ok:           #4FAE83;
    --dw-ok-bg:        rgba(79, 174, 131, .13);
    --dw-warn:         #DFA24A;
    --dw-warn-bg:      rgba(223, 162, 74, .13);
    --dw-danger:       #E2705C;
    --dw-danger-bg:    rgba(226, 112, 92, .13);
    --dw-info:         #6FA3C4;
    --dw-info-bg:      rgba(111, 163, 196, .13);
    --dw-neutral:      #A79F91;
    --dw-neutral-bg:   rgba(167, 159, 145, .12);

    --dw-shadow-xs:    0 1px 2px rgba(0, 0, 0, .30);
    --dw-shadow-sm:    0 1px 3px rgba(0, 0, 0, .35), 0 1px 2px rgba(0, 0, 0, .25);
    --dw-shadow-md:    0 4px 12px rgba(0, 0, 0, .40), 0 1px 3px rgba(0, 0, 0, .25);
    --dw-shadow-lg:    0 12px 28px rgba(0, 0, 0, .50), 0 3px 8px rgba(0, 0, 0, .30);
    --dw-ring:         0 0 0 3px var(--dw-gold-soft);

    --dw-table-hover:  #26221C;

    --dw-side-bg:      #14120F;
    --dw-side-bg-2:    #1A1713;
}

/* ============================================================
   3) نگاشت متغیرهای قدیمی → جدید (compatibility layer)
   BrandConfig.as_css_vars() همچنان --primary و... را override
   می‌کند، پس این نام‌ها باید حفظ شوند.
   ============================================================ */
:root {
    --primary:         var(--dw-gold);
    --primary-dark:    var(--dw-gold-dark);
    --primary-light:   #E8D8B8;
    --primary-soft:    var(--dw-gold-soft);
    --bg-light:        var(--dw-bg);
    --bg-white:        var(--dw-surface);
    --bg-gray:         var(--dw-surface-2);
    --surface-dark:    var(--dw-side-bg);
    --surface-dark-2:  var(--dw-side-bg-2);
    --text-dark:       var(--dw-text);
    --text-muted:      var(--dw-muted);
    --border-soft:     var(--dw-border);
    --accent-green:    var(--dw-ok);
    --accent-orange:   var(--dw-warn);
    --accent-red:      var(--dw-danger);
    --radius:          var(--dw-radius-md);
    --shadow-sm:       var(--dw-shadow-sm);
    --shadow-md:       var(--dw-shadow-md);
    --shadow-lg:       var(--dw-shadow-lg);
    --transition:      var(--dw-t);
}

/* ============================================================
   4) Reduced motion — انیمیشن‌ها غیرفعال
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ============================================================
   6) 3D DEPTH — تم تیره
   ============================================================ */
[data-theme="dark"] {
    --dw-elev-1: 0 1px 2px rgba(0,0,0,.42),
                 0 2px 6px rgba(0,0,0,.32),
                 0 8px 20px -8px rgba(0,0,0,.44);
    --dw-elev-2: 0 2px 4px rgba(0,0,0,.44),
                 0 6px 14px rgba(0,0,0,.36),
                 0 16px 32px -10px rgba(0,0,0,.50);
    --dw-elev-3: 0 4px 8px rgba(0,0,0,.46),
                 0 10px 24px rgba(0,0,0,.40),
                 0 24px 48px -12px rgba(0,0,0,.54);
    --dw-elev-4: 0 8px 16px rgba(0,0,0,.50),
                 0 20px 40px rgba(0,0,0,.44),
                 0 40px 80px -20px rgba(0,0,0,.60);

    --dw-edge-light: inset 0 1px 0 rgba(255,255,255,.09);
    --dw-edge-dark:  inset 0 -1px 0 rgba(0,0,0,.30);

    --dw-btn-edge:       inset 0 1px 0 rgba(255,255,255,.12),
                         inset 0 -2px 0 rgba(0,0,0,.34);
    --dw-btn-edge-press: inset 0 1px 0 rgba(255,255,255,.06),
                         inset 0 -1px 0 rgba(0,0,0,.40);
    --dw-gold-glow:        0 6px 16px -4px rgba(212,184,120,.35);
    --dw-gold-glow-strong: 0 12px 28px -4px rgba(212,184,120,.45);

    --dw-glass-bg:     rgba(33,29,24,.74);
    --dw-glass-border: rgba(255,255,255,.10);
    --dw-glass-blur:   14px;

    --dw-surface-grad: linear-gradient(180deg, rgba(255,255,255,.055), rgba(255,255,255,0) 42%);
    --dw-gold-grad:    linear-gradient(135deg, var(--dw-gold), var(--dw-gold-dark) 55%, var(--dw-gold-deep));

    --dw-lift: -2px;
}