/* =============================================================================
   SPIKE INDUSTRIAL GROUP — THEME TOKENS  (شناسنامه گرافیکی سایت)
   -----------------------------------------------------------------------------
   این تنها فایلی است که برای تغییر هویت بصری کل سایت باید ویرایش شود.
   هر رنگ، فونت، شعاع گوشه و سرعت انیمیشن در تمام صفحات از اینجا خوانده می‌شود.
   مثال: برای عوض کردن رنگ طلایی برند، فقط --accent-color را تغییر دهید.
   نسخه: 1.0  |  آخرین ویرایش: 2026-08-06
   ========================================================================== */

:root {

    /* ---------------------------------------------------------------------
       ۱. رنگ برند  —  تغییر --accent-color کل سایت را عوض می‌کند
       --------------------------------------------------------------------- */
    --accent-color:        #cca770;                                            /* طلایی اصلی برند */
    --accent-light:        color-mix(in srgb, var(--accent-color), white 20%); /* حالت هاور روشن */
    --accent-dim:          color-mix(in srgb, var(--accent-color), black 10%); /* دایره‌های صنایع هدف */
    --accent-dark:         color-mix(in srgb, var(--accent-color), black 20%); /* حاشیه و تاکید */
    --accent-tint:         #f5efe6;                                            /* پس‌زمینه بسیار روشن طلایی */

    /* ---------------------------------------------------------------------
       ۲. منوی کناری و سطوح تیره
       --------------------------------------------------------------------- */
    --sidebar-bg:          #32281d;                                            /* قهوه‌ای تیره منو */
    --sidebar-dim:         color-mix(in srgb, var(--sidebar-bg), white 10%);
    --sidebar-deep:        #1a1511;                                            /* تیره‌ترین لایه */
    --sidebar-soft:        #5c4935;                                            /* قهوه‌ای میانی */
    --sidebar-fade:        #7e7060;                                            /* قهوه‌ای محو */
    --sidebar-text:        #ffffff;
    --sidebar-text-muted:  #a0958d;

    /* ---------------------------------------------------------------------
       ۳. سطوح روشن و خطوط
       --------------------------------------------------------------------- */
    --bg-main:             #ffffff;                                            /* پس‌زمینه اصلی صفحه */
    --surface-white:       #ffffff;                                            /* کارت‌ها و کادرها */
    --surface-soft:        #fbfbfa;                                            /* کارت‌های ملایم */
    --surface-muted:       #f5f5f5;                                            /* نوارهای خاکستری */
    --border-light:        #eeeeee;
    --border-soft:         #eaeaea;
    --border-faint:        #ededed;
    --border-mid:          #dfdfdf;

    /* ---------------------------------------------------------------------
       ۴. متن
       --------------------------------------------------------------------- */
    --text-dark:           #222222;                                            /* متن اصلی */
    --text-medium:         #555555;                                            /* متن بدنه */
    --text-muted:          #888888;                                            /* توضیحات فرعی */
    --text-light:          #f2f2f2;                                            /* متن روی زمینه تیره */
    --text-on-dark:        #dfdfdf;                                            /* تیتر روی زمینه تیره */

    /* ---------------------------------------------------------------------
       ۵. رنگ‌های وضعیت
       --------------------------------------------------------------------- */
    --warning-color:       #e67e22;

    /* ---------------------------------------------------------------------
       ۶. سایه و پرده (RGB خام تا بتوان با آلفای دلخواه ترکیب کرد)
       --------------------------------------------------------------------- */
    --shadow-rgb:          0, 0, 0;
    --light-rgb:           255, 255, 255;
    --shadow-soft:         0 2px 10px rgba(var(--shadow-rgb), 0.06);
    --shadow-card:         0 8px 30px rgba(var(--shadow-rgb), 0.10);
    --scrim-strong:        rgba(var(--shadow-rgb), 0.80);

    /* ---------------------------------------------------------------------
       ۷. تایپوگرافی  —  مقادیر پیش‌فرض؛ در بخش زیر بر اساس زبان بازنویسی می‌شود
       --------------------------------------------------------------------- */
    --font-main:           'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
    --font-condensed:      'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
    --font-display:        'Roboto Slab', Georgia, serif;                      /* اعداد و تیترهای ویژه */

    /* ---------------------------------------------------------------------
       ۸. چیدمان و حرکت
       --------------------------------------------------------------------- */
    --sidebar-width:       280px;
    --container-max:       1440px;
    --transition-speed:    0.5s;
    --ease-brand:          cubic-bezier(0.645, 0.045, 0.355, 1.0);
    --radius-sm:           4px;
    --radius-md:           8px;
    --radius-lg:           16px;
}

/* =============================================================================
   بازنویسی فونت بر اساس زبان صفحه — نیازی به ویرایش تک‌تک صفحات نیست
   ========================================================================== */
html[lang="fa"] {
    --font-main:      'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
    --font-condensed: 'IBM Plex Sans Arabic', 'IBM Plex Sans', sans-serif;
}

html[lang="en"] {
    --font-main:      'Roboto', 'IBM Plex Sans', sans-serif;
    --font-condensed: 'Roboto Condensed', 'Roboto', sans-serif;
}

/* =============================================================================
   کف کیفیت — روی گرافیک موجود اثری ندارد، فقط دسترس‌پذیری را تامین می‌کند
   ========================================================================== */

/* احترام به تنظیم «کاهش حرکت» سیستم‌عامل کاربر */
@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;
    }
}

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

/* لینک پرش به محتوا برای صفحه‌خوان‌ها */
.skip-to-content {
    position: absolute;
    top: -60px;
    inset-inline-start: 16px;
    z-index: 10000;
    padding: 10px 18px;
    background: var(--sidebar-bg);
    color: var(--sidebar-text);
    font-family: var(--font-main);
    font-size: 14px;
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: top 0.2s ease;
}

.skip-to-content:focus {
    top: 16px;
}