/* ============================================================
   SINOX API — TOKENS.CSS
   لایه‌ی توکن‌های پایه‌ی سیستم طراحی.
   همه‌ی مقادیر از فایل‌های طراحی (_design/*.dc.html) استخراج شده‌اند؛
   جایی که طراحی مقدار دقیق نداشت (مثل مقیاس فاصله‌گذاری ۴ پیکسلی)
   مقدار به‌صورت سیستماتیک از روی الگوی غالب طراحی‌ها ساخته شده.
   این فایل فقط متغیر تعریف می‌کند — هیچ سلکتور/قانونی غیر از :root ندارد.
   ============================================================ */

:root {
  /* ---------- ۱. پالت پایه (ثابت — طبق مشخصات) ---------- */
  --bg: #07070f;
  --bg2: #0d0d1a;
  --card: #12122a;
  --border: #1e1e3a;
  --text: #e8e8f5;
  --muted: #9c9cba;
  --primary: #6366f1;
  --primary2: #8b5cf6;
  --cyan: #06b6d4;
  --green: #10b981;
  --red: #ef4444;
  --yellow: #f59e0b;

  /* ---------- ۲. سطوح ارتفاع (elevation) ---------- */
  /* هر سطح یک پله روشن‌تر از قبلی — از پس‌زمینه‌ی صفحه تا کارت‌های شناور */
  --elev-0: var(--bg);        /* #07070f — کف صفحه */
  --elev-1: var(--bg2);       /* #0d0d1a — ورودی‌ها، بلوک کد، نوار جست‌وجو */
  --elev-2: var(--card);      /* #12122a — کارت پیش‌فرض */
  --elev-3: #191934;          /* هاور کارت / حالت فعال چیپ / پس‌زمینه‌ی مودال */
  --elev-4: #20204a;          /* هاور آیتم داخل منوی کشویی */
  --elev-5: #232350;          /* بالاترین سطح — پیشرفت شیمر روشن */

  /* ---------- ۳. رنگ‌های حاشیه (border) ---------- */
  --border-1: var(--border);     /* #1e1e3a — حاشیه‌ی پیش‌فرض */
  --border-2: #2b2b52;           /* حاشیه‌ی هاورشده / فعال */
  --border-3: #3b3b6b;           /* حاشیه‌ی هاور روی سطح تیره‌ی دکمه‌ی ثانویه */
  --border-soft: rgba(30, 30, 58, 0.5);   /* خط جداکننده‌ی کم‌رنگ (ردیف جدول) */
  --border-dashed: var(--border-1);       /* حاشیه‌ی نقطه‌چین حالت خالی */

  /* ---------- ۴. متن ---------- */
  --text-1: var(--text);         /* #e8e8f5 — متن اصلی */
  --text-2: #c9c9e6;             /* متن ثانویه، کمی کم‌رنگ‌تر از اصلی */
  --text-muted: var(--muted);    /* #9c9cba — برچسب‌ها، توضیحات */
  --text-dim: #5c5c7a;           /* placeholder، متن غیرفعال */
  --text-faint: #3d3d5c;         /* شماره خط کد، خیلی کم‌رنگ */
  --text-on-accent: #ffffff;     /* متن روی گرادیانت/دکمه‌ی رنگی */
  --text-on-yellow: var(--bg);   /* متن روی زرد (تضاد کافی) */

  /* ---------- ۵. رنگ‌های وضعیت — نسخه‌ی روشن (روی زمینه‌ی تیره) ---------- */
  --green-light: #6ee7b7;
  --red-light: #f87171;
  --yellow-light: #fcd34d;
  --cyan-light: #67e8f9;
  --primary-light: #a5b4fc;
  --primary-lighter: #c7d2fe;
  --primary2-light: #c4b5fd;

  /* ---------- ۶. رنگ‌های وضعیت — لایه‌ی زمینه (tint) و حاشیه ---------- */
  --primary-tint: rgba(99, 102, 241, 0.13);
  --primary-tint-strong: rgba(99, 102, 241, 0.16);
  --primary-border-tint: rgba(99, 102, 241, 0.4);
  --primary2-tint: rgba(139, 92, 246, 0.14);
  --cyan-tint: rgba(6, 182, 212, 0.14);
  --green-tint: rgba(16, 185, 129, 0.14);
  --green-border-tint: rgba(16, 185, 129, 0.32);
  --red-tint: rgba(239, 68, 68, 0.14);
  --red-border-tint: rgba(239, 68, 68, 0.35);
  --yellow-tint: rgba(245, 158, 11, 0.1);
  --yellow-border-tint: rgba(245, 158, 11, 0.32);

  /* رنگ‌های سازنده‌های مدل هوش مصنوعی (برای بج/آواتار مدل در کارت‌ها و لاگ) */
  --brand-anthropic: #d97757;
  --brand-openai: #10b981;
  --brand-deepseek: #4d6bfe;
  --brand-deepseek-light: #8ea2ff;
  --brand-moonshot: #8b5cf6;
  --brand-zhipu: #06b6d4;
  --brand-minimax: #ef4444;
  --brand-xai: #e8e8f5;
  --brand-alibaba: #f59e0b;

  /* ---------- ۷. گرادیانت‌ها ---------- */
  --grad-brand: linear-gradient(135deg, var(--primary), var(--primary2));
  --grad-brand-reverse: linear-gradient(270deg, var(--primary), var(--primary2));
  --grad-logo: linear-gradient(135deg, var(--primary), var(--cyan));
  --grad-accent: linear-gradient(135deg, var(--primary), var(--cyan));
  --grad-mesh:
    radial-gradient(900px 520px at 88% -6%, rgba(99, 102, 241, 0.10), transparent 60%),
    radial-gradient(760px 460px at 8% 12%, rgba(139, 92, 246, 0.09), transparent 62%),
    radial-gradient(700px 500px at 55% 100%, rgba(6, 182, 212, 0.08), transparent 60%),
    var(--bg);
  --grad-text-hero: linear-gradient(115deg, #ffffff 8%, var(--primary-light) 52%, var(--cyan) 96%);
  --grad-text-brand: linear-gradient(135deg, var(--primary-light), var(--primary2));
  --grad-text-error: linear-gradient(135deg, var(--text), var(--primary2) 55%, var(--cyan));
  --grad-success-panel: linear-gradient(140deg, rgba(16, 185, 129, 0.10), rgba(6, 182, 212, 0.05));
  --grad-shimmer: linear-gradient(90deg, #151530, #232350, #151530);
  --grad-shimmer-strong: linear-gradient(90deg, #131330, #1f1f48, #131330);
  --grad-card-border: linear-gradient(140deg, rgba(99, 102, 241, 0.75), rgba(6, 182, 212, 0.35) 55%, rgba(30, 30, 58, 0.9));
  --grad-header-surface: linear-gradient(180deg, #0a0a16, var(--bg));
  --grad-footer-surface: linear-gradient(180deg, var(--bg), #0a0a1a);

  /* ---------- ۸. سایه‌ها و درخشش (glow) ---------- */
  --glow-primary-sm: 0 6px 18px -8px rgba(99, 102, 241, 0.9);
  --glow-primary-md: 0 14px 32px -16px rgba(99, 102, 241, 0.95);
  --glow-primary-lg: 0 16px 36px -16px rgba(99, 102, 241, 0.95);
  --glow-primary-xl: 0 30px 70px -34px rgba(99, 102, 241, 0.7);
  --ring-primary: 0 0 0 3px rgba(99, 102, 241, 0.16);
  --ring-primary-soft: 0 0 0 3px rgba(99, 102, 241, 0.1);
  --shadow-card-hover: var(--glow-primary-sm);
  --shadow-pop: 0 20px 44px -24px rgba(0, 0, 0, 0.9);
  --shadow-pop-lg: 0 30px 70px -34px rgba(0, 0, 0, 0.95);
  --shadow-panel: 0 28px 60px -30px rgba(0, 0, 0, 0.9);
  --shadow-hero-card: 0 40px 90px -40px rgba(0, 0, 0, 0.95);
  --shadow-drawer: -24px 0 60px -20px rgba(0, 0, 0, 0.9);
  --shadow-sticky: 0 10px 30px -18px rgba(0, 0, 0, 0.95);

  /* ---------- ۹. شعاع گوشه (radius) ---------- */
  --radius-xs: 6px;
  --radius-sm: 8px;
  --radius-md: 10px;
  --radius-lg: 12px;
  --radius-xl: 14px;
  --radius-2xl: 16px;
  --radius-3xl: 18px;
  --radius-full: 999px;
  --radius-circle: 50%;
  /* نام‌مستعار سازگار با style.css موجود */
  --radius: var(--radius-xl);

  /* ---------- ۱۰. مقیاس فاصله‌گذاری (۴ پیکسلی) ---------- */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 28px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-14: 56px;
  --space-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  --space-28: 112px;

  /* ---------- ۱۱. مقیاس تایپوگرافی ---------- */
  /* بدنه — از موبایل تا دسکتاپ با clamp پویا می‌شود */
  --fs-2xs: 11px;
  --fs-xs: 12px;
  --fs-sm: 13px;
  --fs-base: 14px;
  --fs-md: 15px;
  --fs-lg: 16px;
  --fs-xl: 17.5px;
  --fs-2xl: clamp(18px, 1.5vw + 12px, 20px);
  --fs-3xl: clamp(20px, 2vw + 13px, 24px);

  /* عنوان‌ها — مقیاس روان با clamp، بین عرض موبایل ۳۹۰ و دسکتاپ ۱۴۴۰ */
  --fh-h1: clamp(28px, 4vw + 14px, 60px);
  --fh-h2: clamp(24px, 2.6vw + 14px, 38px);
  --fh-h3: clamp(20px, 1.4vw + 14px, 26px);
  --fh-h4: clamp(17px, 0.8vw + 13px, 19.5px);
  --fh-display: clamp(56px, 9vw + 10px, 112px); /* اعداد بزرگ ۴۰۴/۵۰۰ */

  /* ---------- ۱۲. وزن فونت ---------- */
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;
  --fw-extrabold: 800;
  --fw-black: 900;

  /* ---------- ۱۳. ارتفاع خط ---------- */
  --lh-tight: 1.1;
  --lh-heading: 1.3;
  --lh-snug: 1.6;
  --lh-body: 1.8;      /* پیش‌فرض متن فارسی — طبق درخواست */
  --lh-relaxed: 2;
  --lh-loose: 2.15;

  /* ---------- ۱۴. فونت ---------- */
  --font-sans: 'Vazirmatn', 'Segoe UI', Tahoma, sans-serif;
  --font-mono: 'JetBrains Mono', 'Courier New', ui-monospace, monospace;
  --tracking-mono: 0.06em;
  --tracking-mono-wide: 0.14em;
  --tracking-tight: -0.02em;

  /* ---------- ۱۵. زمان‌بندی و منحنی حرکت ---------- */
  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0, 0, 0.2, 1);
  --ease-in: cubic-bezier(0.4, 0, 1, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --dur-fast: 120ms;
  --dur-base: 200ms;
  --dur-slow: 280ms;
  --dur-slower: 400ms;
  --dur-shimmer: 1.4s;
  --dur-pulse: 2.2s;

  /* ---------- ۱۶. چیدمان ---------- */
  --container-w: 1200px;
  --container-w-wide: 1440px;
  --nav-h: 68px;
  --nav-h-mobile: 60px;
  --sidebar-w: 240px;
  --sidebar-w-mobile: 200px;
  --drawer-w: 320px;
  --z-nav: 100;
  --z-drawer: 150;
  --z-modal: 200;
  --z-toast: 1000;

  /* توکن‌های سازگار با style.css فعلی (تا زمان مهاجرت صفحات) */
  --glow: var(--glow-primary-md);
}

/* ─── کاهش حرکت: خنثی‌سازی انیمیشن و ترنزیشن برای کاربرانی که آن را
   در سیستم‌عامل خاموش کرده‌اند ─── */
@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;
  }
}