:root {

    /* =========================
       COLORS — Electric Mint

       این سیستم رنگ جایگزین پالت قبلی (که عیناً از Bitly گرفته شده
       بود) شد. همه‌ی رنگ‌های سایت باید از همینجا بیان — هیچ‌وقت مستقیم
       هگز رنگ توی یه فایل CSS دیگه ننویس، همیشه var(--color-x) استفاده
       کن. این‌جوری کل هویت بصری سایت با تغییر همین چند خط عوض می‌شه.
    ========================= */

    --color-primary:       #3DDC97;   /* نعنایی برق — رنگ اصلی برند */
    --color-primary-hover: #2fc684;
    --color-primary-soft:  rgba(61,220,151,0.12);   /* برای بک‌گراند/بوردر ملایم */
    --color-primary-rgb:   61, 220, 151;   /* برای rgba(var(--color-primary-rgb), X) */

    --color-accent-2:       #7C5CFF;  /* بنفش — برای «پلن حرفه‌ای»، نشان ویژه */
    --color-accent-2-hover: #6a48f0;
    --color-accent-2-rgb:   124, 92, 255;

    --color-brand-dark:    #0F0B1F;   /* پس‌زمینه‌ی اصلی — بنفش-مشکی نه آبی-مشکی قبلی */
    --color-brand-mid:     #14102A;   /* نوار بالا / کارت‌ها روی پس‌زمینه‌ی تیره */
    --color-brand-deep:    #100C22;   /* برای گرادیان‌های عمیق‌تر */
    --color-glow-mid:      #1A1440;   /* توقف میانی گرادیان‌های هیرو — یه‌کم روشن‌تر/بنفش‌تر */

    --color-bg:            #F5F5F7;   /* فقط برای بخش‌های احتمالی روشن، به‌ندرت استفاده می‌شه */

    --color-surface:       #ffffff;
    --color-surface-soft:  #F0F2F8;

    --color-text:          #1B1F2E;
    --color-text-light:    #ffffff;
    --color-text-muted:    #64748b;

    --color-success:       #22c55e;
    --color-error:         #ef4444;
    --color-warning:       #f59e0b;

    --color-border:        #E2E8F0;
    --color-border-strong: #CBD5E1;


    /* =========================
       TYPOGRAPHY
    ========================= */

    --font-base:
        "Shabnam",
        system-ui,
        -apple-system,
        BlinkMacSystemFont,
        "Segoe UI",
        sans-serif;

    --text-xs:   0.75rem;
    --text-sm:   0.875rem;
    --text-base: 1rem;
    --text-lg:   1.125rem;
    --text-xl:   1.25rem;
    --text-2xl:  1.5rem;
    --text-3xl:  2rem;
    --text-4xl:  2.75rem;

    --font-weight-normal:   400;
    --font-weight-medium:   500;
    --font-weight-semibold: 600;
    --font-weight-bold:     700;

    --line-height-base: 1.6;


    /* =========================
       SPACING
    ========================= */

    --space-2xs: 4px;
    --space-xs:  8px;
    --space-sm:  12px;
    --space-md:  16px;
    --space-lg:  24px;
    --space-xl:  32px;
    --space-2xl: 48px;
    --space-3xl: 64px;
    --space-4xl: 96px;


    /* =========================
       RADIUS
    ========================= */

    --radius-sm:   8px;
    --radius-md:   12px;
    --radius-lg:   16px;
    --radius-xl:   24px;
    --radius-full: 9999px;


    /* =========================
       SHADOWS
    ========================= */

    --shadow-sm: 0 2px 6px rgba(0,0,0,0.06);
    --shadow-md: 0 10px 25px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 40px rgba(0,0,0,0.14);
    --shadow-glow: 0 0 40px rgba(61,220,151,0.18);   /* برای هایلایت کردن با رنگ برند */


    /* =========================
       TRANSITIONS (ساده — برای hover/focus روزمره)
    ========================= */

    --transition-fast: 0.15s ease;
    --transition-base: 0.25s ease;
    --transition-slow: 0.4s ease;


    /* =========================
       MOTION SYSTEM (برای انیمیشن/جلوه‌های سینمایی‌تر)

       این بخش جدیده و دقیقاً برای همون هدفیه که خواسته بودی: هر جای
       سایت خواستی یه انیمیشن اضافه کنی، به‌جای اینکه عدد جدید بسازی،
       از همین توکن‌ها استفاده کن — این‌جوری همه‌ی حرکت‌های سایت یه
       "زبان" هماهنگ دارن، نه هرکدوم یه سرعت/ریتم جدا.

       راهنمای کامل استفاده: public/assets/css/styles/motion.css
       و فایل docs/DESIGN-SYSTEM.md
    ========================= */

    /* مدت زمان‌ها — از کوتاه به بلند */
    --duration-instant:   100ms;  /* microinteraction: کلیک دکمه، هاور */
    --duration-fast:      200ms;  /* تغییر رنگ، فید ساده */
    --duration-base:      350ms;  /* ظاهرشدن یه کارت/مودال */
    --duration-slow:      600ms;  /* reveal یه بخش وقتی اسکرول می‌شه */
    --duration-cinematic: 900ms;  /* افکت‌های بزرگ هیرو، ورود صفحه */

    /* منحنی‌های حرکت — کدوم حس رو می‌خوای منتقل کنی */
    --ease-standard:  cubic-bezier(0.4, 0, 0.2, 1);      /* حرکت معمولی/خنثی */
    --ease-out-expo:  cubic-bezier(0.16, 1, 0.3, 1);      /* شروع تند، فرود نرم — برای reveal */
    --ease-smooth:    cubic-bezier(0.65, 0, 0.35, 1);     /* ورود و خروج هردو نرم */
    --ease-bounce:    cubic-bezier(0.34, 1.56, 0.64, 1);  /* یه‌کم فنری/بازیگوش — کم‌مصرف کن */


    /* =========================
       LAYOUT
    ========================= */

    --container-sm: 540px;
    --container-md: 720px;
    --container-lg: 960px;
    --container-xl: 1200px;

    --sidebar-width:  240px;
    --header-height:  68px;
    --nav-height:     68px;


    /* =========================
       COMPONENTS
    ========================= */

    --input-height:  52px;
    --button-height: 52px;

}