/* ==========================================================================
   صداکار — توکن‌های طراحی

   یک منبع برای رنگ، فاصله، تایپوگرافی، شعاع، سایه و حرکت.
   هیچ فایل دیگری مقدار خام نمی‌نویسد.

   اصول:
   · مقیاس فاصله بر پایهٔ ۴ پیکسل (ریتم ۴/۸)
   · مقیاس تایپ محدود و پله‌ای — ۷ اندازه، نه ۱۰
   · یک زبان ارتفاع (سایهٔ نرم). سایهٔ سخت فقط در صفحات معرفی محصول
   · رنگ معنایی همیشه با نشانهٔ دوم (آیکون/متن) همراه است، نه تنها رنگ
   ========================================================================== */

:root {
  /* ---------------------------------------------------------------- رنگ پایه */
  /* کاغذ و مرکب — هویت بصری محصول */
  --paper: #f6f3ea;          /* پس‌زمینهٔ صفحه */
  --paper-2: #efebdf;        /* سطح فرورفته، ردیف hover */
  --paper-3: #e6e1d2;        /* فرورفتگی بیشتر */
  --surface: #fffdf8;        /* سطح کارت */
  --surface-2: #faf8f1;      /* سطح کارت ثانویه (سربرگ کارت) */

  --ink: #1c1a13;            /* متن اصلی — کنتراست ۱۵.۲:۱ روی paper */
  --ink-2: #55503f;          /* متن ثانویه — کنتراست ۷.۱:۱ */
  --ink-3: #7d7663;          /* متن کم‌اهمیت — کنتراست ۴.۶:۱ (حد مجاز) */
  --ink-4: #a8a293;          /* فقط برای آیکون تزئینی و placeholder */

  --line: #ddd7c5;           /* مرز اصلی */
  --line-2: #eae5d6;         /* مرز نرم، جداکنندهٔ درون‌کارتی */

  /* ------------------------------------------------------------ رنگ معنایی */
  --red: #b8341a;            /* خطر، معوق — کنتراست ۵.۹:۱ روی surface */
  --red-ink: #8f2712;        /* متن روی پس‌زمینهٔ نرم قرمز */
  --red-bg: #fbeeea;
  --red-line: #f0cfc6;

  --green: #1b6141;          /* موفقیت، وصولی — کنتراست ۶.۱:۱ */
  --green-ink: #124630;
  --green-bg: #eaf3ee;
  --green-line: #c6ddd0;

  --blue: #3a5680;           /* اطلاع، در جریان — کنتراست ۶.۴:۱ */
  --blue-ink: #2b4162;
  --blue-bg: #ecf0f6;
  --blue-line: #cbd7e6;

  --amber: #7d4f10;          /* هشدار، تعویق — کنتراست ۶.۲:۱ */
  --amber-ink: #613c07;
  --amber-bg: #f8f0e2;
  --amber-line: #e6d4b4;

  /* نگاشت لحن — کامپوننت‌ها فقط این‌ها را می‌خوانند */
  --tone-fg: var(--ink-2);
  --tone-bg: var(--paper-2);
  --tone-line: var(--line);

  /* ------------------------------------------------------------ تایپوگرافی */
  --font: "Vazirmatn", "Segoe UI", Tahoma, system-ui, sans-serif;

  /* مقیاس پله‌ای — ۷ اندازه، هر کدام یک نقش مشخص */
  --t-caption: 0.6875rem;    /* ۱۱px — برچسب ریز، واحد */
  --t-small: 0.75rem;        /* ۱۲px — فرا‌داده، زیرنویس */
  --t-body-sm: 0.8125rem;    /* ۱۳px — متن فشرده جدول و ردیف */
  --t-body: 0.875rem;        /* ۱۴px — متن پایهٔ محیط کار */
  --t-lead: 1rem;            /* ۱۶px — متن مهم، ورودی فرم */
  --t-h3: 1.0625rem;         /* ۱۷px — تیتر بخش */
  --t-h2: 1.3125rem;         /* ۲۱px — تیتر صفحه */
  --t-h1: 1.625rem;          /* ۲۶px — تیتر بزرگ */
  --t-metric: 1.75rem;       /* ۲۸px — عدد شاخص */
  --t-metric-lg: 2.25rem;    /* ۳۶px — عدد قهرمان */

  --w-normal: 400;
  --w-medium: 500;
  --w-semi: 600;
  --w-bold: 700;

  --lh-tight: 1.3;
  --lh-snug: 1.5;
  --lh-normal: 1.7;

  /* ------------------------------------------------------------------ فاصله */
  /* پایهٔ ۴ پیکسل — چگالی داشبورد */
  --s-1: 0.25rem;   /*  ۴ */
  --s-2: 0.5rem;    /*  ۸ */
  --s-3: 0.75rem;   /* ۱۲ */
  --s-4: 1rem;      /* ۱۶ */
  --s-5: 1.25rem;   /* ۲۰ */
  --s-6: 1.5rem;    /* ۲۴ */
  --s-8: 2rem;      /* ۳۲ */
  --s-10: 2.5rem;   /* ۴۰ */
  --s-12: 3rem;     /* ۴۸ */
  --s-16: 4rem;     /* ۶۴ */

  /* ریتم عمودی — سه پله برای سلسله‌مراتب.
     این سه توکن تنها جای تعیین فاصلهٔ بلوک‌ها هستند؛ باز‌کردن صفحه یعنی
     عوض‌کردن همین‌ها، نه اضافه‌کردن margin در قالب‌ها. */
  --gap-tight: var(--s-4);   /* درون یک گروه */
  --gap-block: var(--s-6);   /* بین کارت‌ها */
  --gap-section: var(--s-10); /* بین بخش‌های صفحه */

  /* ------------------------------------------------------------------ شعاع */
  --r-xs: 4px;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-xl: 20px;
  --r-full: 999px;

  /* ------------------------------------------------------------------ ارتفاع */
  /* یک زبان: سایهٔ نرم لایه‌ای. سه پله، نه بیشتر */
  --e-0: none;
  --e-1: 0 1px 2px rgba(28, 26, 19, 0.05);
  --e-2: 0 2px 8px rgba(28, 26, 19, 0.07), 0 1px 2px rgba(28, 26, 19, 0.04);
  --e-3: 0 8px 24px rgba(28, 26, 19, 0.1), 0 2px 6px rgba(28, 26, 19, 0.05);
  --e-4: 0 16px 48px rgba(28, 26, 19, 0.16), 0 4px 12px rgba(28, 26, 19, 0.06);

  --bw: 1px;
  --bw-2: 1.5px;

  /* روپوش و درخشش — تنها جاهایی که شفافیت لازم است.
     چون از توکن می‌آیند، تم تیره می‌تواند تیره‌ترشان کند. */
  --scrim: rgba(20, 19, 14, 0.5);
  --scrim-deep: rgba(20, 19, 14, 0.6);
  --glow-red: 0 6px 20px rgba(184, 52, 26, 0.3);
  --glow-red-sm: 0 4px 14px rgba(184, 52, 26, 0.26);
  --glow-red-lg: 0 8px 26px rgba(184, 52, 26, 0.42);
  --ring-red-0: rgba(184, 52, 26, 0.35);
  --ring-red-1: rgba(184, 52, 26, 0);

  /* علامت تیک چک‌باکس — رنگش باید با پس‌زمینهٔ ink تضاد داشته باشد */
  --tick-mark: #f6f3ea;

  /* حلقهٔ تمرکز — یکسان در کل محصول */
  --ring: 0 0 0 3px rgba(184, 52, 26, 0.18);
  --ring-line: var(--red);

  /* ------------------------------------------------------------------ حرکت */
  /* حرکت محسوس اما کوتاه؛ خروج سریع‌تر از ورود */
  --d-fast: 120ms;
  --d-base: 180ms;
  --d-slow: 260ms;
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  /* ------------------------------------------------------------------ اندازه */
  --w-page: 1320px;          /* بیشینهٔ عرض محتوای محیط کار */
  --w-prose: 44rem;          /* بیشینهٔ عرض متن خواندنی */
  --w-sidebar: 248px;
  --h-topbar: 56px;
  --h-tap: 44px;             /* حداقل هدف لمسی */
  --h-control: 38px;         /* ارتفاع دکمه و ورودی استاندارد */
  --h-control-lg: 44px;

  --z-sticky: 30;
  --z-drawer: 50;
  --z-overlay: 70;
  --z-toast: 90;
}

/* ========================================================================== */
/* تم تیره — همان توکن‌ها، مقادیر تازه. کنتراست جداگانه سنجیده شده.            */
/* ========================================================================== */
[data-theme="dark"] {
  --paper: #14130e;
  --paper-2: #1c1a14;
  --paper-3: #24211a;
  --surface: #1a1813;
  --surface-2: #211e17;

  --ink: #f2eee3;            /* ۱۴.۱:۱ روی surface */
  --ink-2: #bdb6a4;          /* ۷.۸:۱ */
  --ink-3: #928b79;          /* ۴.۷:۱ */
  --ink-4: #6b6555;

  --line: #383327;
  --line-2: #2a271f;

  /* در تم تیره رنگ‌ها روشن‌تر می‌شوند تا کنتراست حفظ شود */
  --red: #f08a6e;
  --red-ink: #f7b8a6;
  --red-bg: #2b1a15;
  --red-line: #4a2c22;

  --green: #6fc59a;
  --green-ink: #9bd9b9;
  --green-bg: #14251c;
  --green-line: #234034;

  --blue: #8fb0dd;
  --blue-ink: #b3c9e8;
  --blue-bg: #171e29;
  --blue-line: #2a3648;

  --amber: #dda94f;
  --amber-ink: #ecc684;
  --amber-bg: #26200f;
  --amber-line: #40361b;

  --e-1: 0 1px 2px rgba(0, 0, 0, 0.3);
  --e-2: 0 2px 8px rgba(0, 0, 0, 0.35), 0 1px 2px rgba(0, 0, 0, 0.2);
  --e-3: 0 8px 24px rgba(0, 0, 0, 0.45), 0 2px 6px rgba(0, 0, 0, 0.25);
  --e-4: 0 16px 48px rgba(0, 0, 0, 0.6), 0 4px 12px rgba(0, 0, 0, 0.3);

  /* در تم تیره روپوش باید تیره‌تر و درخشش کم‌رنگ‌تر باشد */
  --scrim: rgba(0, 0, 0, 0.66);
  --scrim-deep: rgba(0, 0, 0, 0.76);
  --glow-red: 0 6px 20px rgba(240, 138, 110, 0.22);
  --glow-red-sm: 0 4px 14px rgba(240, 138, 110, 0.18);
  --glow-red-lg: 0 8px 26px rgba(240, 138, 110, 0.3);
  --ring-red-0: rgba(240, 138, 110, 0.3);
  --ring-red-1: rgba(240, 138, 110, 0);
  --tick-mark: #14130e;

  --ring: 0 0 0 3px rgba(240, 138, 110, 0.24);
}