/* =============================================================
   DESIGN TOKENS — منبع واحد حقیقت (Single Source of Truth)
   پلتفرم نوآوری، آموزش و مشاوره
   همه‌ی کامپوننت‌ها باید از این متغیرها استفاده کنند.
   ============================================================= */

:root {
  /* ---------- رنگ اصلی: Teal (سبز کله‌غازی) ---------- */
  --color-teal-50:  #F0FDFA;
  --color-teal-100: #CCFBF1;
  --color-teal-200: #99F6E4;
  --color-teal-300: #5EEAD4;
  --color-teal-400: #2DD4BF;
  --color-teal-500: #14B8A6;  /* روشن */
  --color-teal-600: #0D9488;
  --color-teal-700: #0F766E;  /* اصلی */
  --color-teal-800: #115E59;
  --color-teal-900: #134E4A;

  /* ---------- رنگ مکمل: بنفش تیره (Violet) ---------- */
  --color-violet-50:  #F5F3FF;
  --color-violet-100: #EDE9FE;
  --color-violet-200: #DDD6FE;
  --color-violet-300: #C4B5FD;
  --color-violet-400: #A78BFA;
  --color-violet-500: #8B5CF6;
  --color-violet-600: #7C3AED;
  --color-violet-700: #6D28D9;  /* مکمل روشن */
  --color-violet-800: #5B21B6;
  --color-violet-900: #4C1D95;  /* مکمل اصلی */

  /* ---------- خنثی‌ها (Neutral / Slate) ---------- */
  --color-white:   #FFFFFF;
  --color-bg:      #F8FAFC;  /* پس‌زمینه‌ی روشن صفحه */
  --color-surface: #F1F5F9;  /* سطوح خنثی */
  --color-line:    #E2E8F0;  /* خطوط و بوردرها */
  --color-muted:   #64748B;  /* متن کم‌رنگ */
  --color-subtle:  #94A3B8;
  --color-text:    #1E293B;  /* متن اصلی */
  --color-ink:     #0F172A;  /* تیره‌ترین متن / عناوین */

  /* ---------- نقش‌های معنایی (Semantic) ---------- */
  --color-primary:        var(--color-teal-700);
  --color-primary-light:  var(--color-teal-500);
  --color-primary-dark:   var(--color-teal-800);
  --color-accent:         var(--color-violet-900);
  --color-accent-light:   var(--color-violet-700);
  --color-success:        #16A34A;
  --color-warning:        #D97706;
  --color-danger:         #DC2626;
  --color-info:           var(--color-teal-600);

  /* ---------- گرادیان‌های برند ---------- */
  --gradient-brand:  linear-gradient(135deg, #0F766E 0%, #6D28D9 100%);
  --gradient-teal:   linear-gradient(135deg, #14B8A6 0%, #0F766E 100%);
  --gradient-violet: linear-gradient(135deg, #7C3AED 0%, #4C1D95 100%);
  --gradient-soft:   linear-gradient(180deg, #F0FDFA 0%, #F5F3FF 100%);
  --gradient-hero:   radial-gradient(1200px 600px at 85% -10%, rgba(109,40,217,.10), transparent 60%),
                     radial-gradient(900px 500px at 5% 10%, rgba(15,118,110,.10), transparent 55%);

  /* ---------- تایپوگرافی ---------- */
  --font-fa:    'Vazirmatn', ui-sans-serif, system-ui, sans-serif;
  --font-latin: 'Inter', ui-sans-serif, system-ui, sans-serif;

  --fs-display: 3.5rem;    /* 56px */
  --fs-h1:      2.5rem;    /* 40px */
  --fs-h2:      2rem;      /* 32px */
  --fs-h3:      1.5rem;    /* 24px */
  --fs-h4:      1.25rem;   /* 20px */
  --fs-lg:      1.125rem;  /* 18px */
  --fs-base:    1rem;      /* 16px */
  --fs-sm:      0.875rem;  /* 14px */
  --fs-xs:      0.75rem;   /* 12px */

  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    800;

  --lh-tight:   1.2;
  --lh-snug:    1.4;
  --lh-normal:  1.7;   /* راحتی خواندن متن فارسی */

  /* ---------- فاصله‌گذاری (Spacing) ---------- */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --section-y: 96px;        /* فاصله عمودی بخش‌ها (دسکتاپ) */
  --container-max: 1200px;  /* حداکثر عرض محتوا */

  /* ---------- شعاع گوشه‌ها (Radius) — گوشه‌های نرم ---------- */
  --radius-sm:   8px;
  --radius-md:   12px;
  --radius-lg:   16px;
  --radius-xl:   20px;
  --radius-2xl:  24px;
  --radius-3xl:  32px;
  --radius-full: 9999px;

  /* ---------- سایه‌ها (Shadows) — ملایم ---------- */
  --shadow-xs:  0 1px 2px rgba(15, 23, 42, 0.06);
  --shadow-sm:  0 2px 8px rgba(15, 23, 42, 0.06);
  --shadow-md:  0 8px 24px rgba(15, 23, 42, 0.08);
  --shadow-lg:  0 18px 40px rgba(15, 23, 42, 0.10);
  --shadow-xl:  0 28px 60px rgba(15, 23, 42, 0.12);
  --shadow-teal:   0 14px 30px rgba(15, 118, 110, 0.25);
  --shadow-violet: 0 14px 30px rgba(76, 29, 149, 0.22);

  /* ---------- انتقال‌ها (Motion) ---------- */
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --dur-fast: 0.15s;
  --dur:      0.25s;
  --dur-slow: 0.4s;
}