/* ============================================================
   آراپشتیبان — توکن‌های دیزاین‌سیستم (مشترک بین پنل مشتری و کارشناس)
   منبعِ یگانهٔ رنگ/فاصله/شعاع/سایه. جایگزینِ ۵۰/۴۵ رنگِ پراکنده.
   دارک‌مود = فقط بازتعریفِ همین توکن‌ها (بدون کد تکراری).
   ============================================================ */

:root {
  /* --- خنثی (Slate، سردِ کمی آبی‌گرا) ---
     سطوح عمداً سفیدِ خالص نیستند: کارتِ #ffffff کنارِ پس‌زمینهٔ #f1f5f9 فقط
     ۱.۰۹ نسبتِ روشنایی فاصله داشت، پس کلِ صفحه مثلِ یک «دیوارِ سفید» خوانده
     می‌شد و چشم را می‌زد. حالا هر دو یک پله پایین‌تر و ته‌مایهٔ سورمه‌ای
     (هم‌محورِ --ink) دارند: جداییِ کارت/پس‌زمینه ۱.۱۵ و روشناییِ کلیِ صفحه
     از ۹۰.۸٪ به ۷۱.۹٪ رسید. کنتراستِ متن همچنان AAA (۱۵.۰). */
  --ink: #0f172a;            /* قوی‌ترین متن/عنوان */
  --text: #22304a;           /* متن اصلی */
  --text-muted: #55637c;
  --text-faint: #7d8ba3;
  --bg: #d6dde9;             /* پس‌زمینهٔ اپ */
  --surface: #e7ecf4;        /* کارت */
  --surface-2: #dde4ef;      /* پنل/سطح ملایم */
  --border: #c2cddd;
  --border-strong: #9fadc2;

  /* --- کروم برند (navbar) — تم‌آگاه: روشن در روز، تیره در شب ---
     قبلاً این توکن‌ها فقط اینجا تعریف می‌شدند و در دارک بازتعریف نمی‌شدند،
     برای همین هدر در هر دو تم تیره می‌ماند — درحالی‌که سایدبار از --surface
     می‌خورَد و تم‌آگاه بود. نتیجه: هدرِ تیره کنارِ سایدبارِ روشن. حالا کلِ
     کروم توکنی است تا هدر با تم عوض شود و هیچ رنگِ hardcode در قالب نماند. */
  --chrome-1: #edf1f7;              /* پس‌زمینهٔ هدر */
  --chrome-2: #e2e8f2;              /* لایهٔ دومِ کروم */
  --chrome-text: #55637c;           /* متن/آیکونِ ثانویه */
  --chrome-text-active: #0f172a;    /* متن اصلی و حالتِ hover */
  --chrome-text-dim: #9fadc2;       /* غیرفعال */
  --chrome-line: rgba(15, 23, 42, .14);   /* جداکننده/حاشیه */
  --chrome-hover: rgba(15, 23, 42, .06);  /* پس‌زمینهٔ hover */
  --chrome-tint: rgba(15, 23, 42, .04);   /* سطحِ ملایمِ داخلِ کروم */
  --chrome-tint-2: rgba(15, 23, 42, .10); /* حاشیهٔ همان سطح */
  --chrome-shadow: 0 5px 8px rgba(15, 23, 42, .12);
  /* قبضهٔ سوییچِ تم. توکنِ --sw-accent (لهجهٔ گرادیانِ ریل) حذف شد: ریل حالا
     ته‌رنگِ تختِ آبی می‌گیرد، همان که سه دایرهٔ کنارش دارند، پس گرادیان و
     رنگِ اختصاصی‌اش دیگر مصرف‌کننده‌ای نداشت. */
  --sw-knob: #fdfdfb;
  /* خطِ دور و گلیفِ هر چهار کنترلِ هدر (زنگ/سایت/تلفن + ریلِ سوییچِ تم) —
     همه از همین یک توکن، پس همیشه دقیقاً هم‌رنگ‌اند.
     ⚠️ داخلِ هر چهار کنترل از ۰۸-۲۳ **کاملاً شفاف** است (پس‌زمینهٔ هدر پیداست)؛
     این توکن تنها رنگِ آن‌هاست و hover هم واشِ همین رنگ است، نه آبی.
     روز خاکستریِ خنثی می‌ماند؛ شب به var(--sw-knob) تغییر می‌کند.
     ⚠️ ریلِ سوییچِ تم هم همین را می‌خورَد، نه --chrome-line. تا قبل از این
     دو مقدارِ متفاوت بودند: هر دو ۱.۵px، ولی ریل رنگِ نیمه‌شفاف داشت و
     دایره‌ها رنگِ مات — پس با ضخامتِ برابر، حلقهٔ دایره‌ها ضخیم‌تر دیده می‌شد.
     حالا هر چهار کنترل در هر تم دقیقاً یک کدِ رنگ دارند.
     روز کمی تیره‌تر از شب می‌ماند (پس‌زمینهٔ روشن)، ولی از نسخهٔ قبلی
     روشن‌تر شد. کنتراست روی هدر: روز ۳.۳:۱ · شب ۳.۲:۱
     (WCAG 1.4.11 برای عناصرِ گرافیکی ۳:۱ می‌خواهد). */
  --hdr-ctl-ink: #78849a;
  /* رنگِ لوگوی برند در هدر. لوگو یک PNGِ تک‌رنگِ سفید است و با mask-image
     رنگ می‌گیرد (نه فیلتر)، پس در هر تم دقیقاً یک رنگِ توکنی می‌خورَد.
     در روز = آبیِ برند (همان آبیِ کاشیِ «ثبت درخواست جدید»)؛ روی هدرِ روشن
     نسبتِ کنتراست ۴.۶:۱ می‌دهد (WCAG 1.4.11 برای گرافیک ۳:۱ می‌خواهد). */
  --brand-logo: #2563eb;

  /* --- accent (آبی) --- */
  --primary: #2563eb;
  --primary-2: #3b82f6;
  --primary-soft: #eff6ff;
  --primary-ink: #1d4ed8;
  --primary-ring: rgba(59, 130, 246, .15);

  /* --- رنگ‌های معناییِ وضعیت --- */
  --success: #10b981;
  --warning: #f59e0b;
  --danger: #ef4444;
  --info: #4338ca;

  /* --- بج وضعیت تیکت (پس‌زمینه/متن) --- */
  --st-unread-bg: #fee2e2; --st-unread-tx: #b91c1c; --st-unread-bd: #fca5a5;
  --st-prog-bg: #fef08a;   --st-prog-tx: #854d0e;   --st-prog-bd: #fde047;
  --st-wait-bg: #e0e7ff;   --st-wait-tx: #4338ca;   --st-wait-bd: #c7d2fe;
  --st-done-bg: #dcfce7;   --st-done-tx: #15803d;   --st-done-bd: #bbf7d0;
  --st-closed-bg: #f3f4f6; --st-closed-tx: #475569; --st-closed-bd: #d1d5db;

  /* --- بج فوریت --- */
  --urg-low-bg: #f1f5f9;  --urg-low-tx: #475569;
  --urg-med-bg: #dbeafe;  --urg-med-tx: #1d4ed8;
  --urg-high-bg: #ffedd5; --urg-high-tx: #b45309;
  --urg-urgent-bg: #fee2e2; --urg-urgent-tx: #b91c1c;

  /* --- بج پلن --- */
  --plan-gold-bg: #fef08a;  --plan-gold-tx: #b45309;  --plan-gold-bd: #fde047;
  --plan-silver-bg: #f1f5f9;--plan-silver-tx: #475569;--plan-silver-bd: #cbd5e1;
  --plan-bronze-bg: #ffedd5;--plan-bronze-tx: #9a3412;--plan-bronze-bd: #fdba74;

  /* --- یادداشت داخلی (زرد) --- */
  --note-bg: #fef08a; --note-tx: #854d0e; --note-bd: #fde047;

  /* --- شکل و عمق --- */
  --r-sm: 6px; --r-md: 8px; --r-lg: 12px; --r-xl: 16px; --r-pill: 50rem;
  --shadow-sm: 0 2px 4px rgba(15, 23, 42, .04);
  --shadow-md: 0 2px 10px rgba(15, 23, 42, .06);
  --shadow-lg: 0 4px 20px rgba(15, 23, 42, .08);
  --shadow-pop: 0 10px 30px rgba(15, 23, 42, .12);

  /* --- فاصله (مقیاس ۴px) --- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px;

  /* --- تایپ --- */
  --font: 'Vazirmatn', 'Tahoma', 'Segoe UI', system-ui, sans-serif;

  /* --- حرکت --- */
  --t-fast: .15s ease; --t: .2s ease; --t-slow: .3s ease;
  /* گذارِ تمِ روز/شب (موجِ دایره‌ای). ۵۰۰ms توصیهٔ مرجعِ View Transitions است:
     کوتاه‌تر «پرش» حس می‌شود و بلندتر از ۵۰۰ms کند. منحنی = استانداردِ متریال. */
  --t-theme: 500ms;
  --e-theme: cubic-bezier(.4, 0, .2, 1);

  color-scheme: light;
}

/* ============ دارک‌مود: پیش‌فرضِ سیستم ============ */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ink: #f8fafc; --text: #e2e8f0; --text-muted: #94a3b8; --text-faint: #64748b;
    --bg: #0b1220; --surface: #1e293b; --surface-2: #172033;
    --border: #334155; --border-strong: #475569;
    --primary-soft: #1e3a5f; --primary-ink: #93c5fd;
    /* کرومِ تیره — همان ظاهرِ قبلیِ هدر، حالا فقط در تمِ شب */
    --chrome-1: #1e293b; --chrome-2: #0f172a;
    --chrome-text: #cbd5e1; --chrome-text-active: #ffffff; --chrome-text-dim: #64748b;
    --chrome-line: rgba(255, 255, 255, .25);
    --chrome-hover: rgba(255, 255, 255, .08);
    --chrome-tint: rgba(255, 255, 255, .05);
    --chrome-tint-2: rgba(255, 255, 255, .09);
    --chrome-shadow: 0 5px 8px rgba(0, 0, 0, .22);
  --sw-knob: #eceefb;
  /* شب: خط و گلیف دقیقاً هم‌رنگِ قبضهٔ سوییچ. عمداً var(--sw-knob) است نه کدِ
     خام، تا اگر رنگِ قبضه عوض شد این خودکار با آن بماند (منبعِ یگانه). */
  --hdr-ctl-ink: var(--sw-knob);
  --brand-logo: #ffffff;   /* شب: لوگوی سفید روی کرومِ تیره */
    --st-unread-bg: #3b1a1a; --st-unread-tx: #fca5a5; --st-unread-bd: #7f1d1d;
    --st-prog-bg: #3a3410;   --st-prog-tx: #fde047;   --st-prog-bd: #713f12;
    --st-wait-bg: #1e2044;   --st-wait-tx: #c7d2fe;   --st-wait-bd: #3730a3;
    --st-done-bg: #0f2e1d;   --st-done-tx: #86efac;   --st-done-bd: #166534;
    --st-closed-bg: #1f2937; --st-closed-tx: #cbd5e1; --st-closed-bd: #374151;
    --urg-low-bg: #1f2937;  --urg-low-tx: #cbd5e1;
    --urg-med-bg: #1e3a5f;  --urg-med-tx: #93c5fd;
    --urg-high-bg: #3a2410; --urg-high-tx: #fdba74;
    --urg-urgent-bg: #3b1a1a; --urg-urgent-tx: #fca5a5;
    --plan-gold-bg: #3a3410; --plan-gold-tx: #fde047; --plan-gold-bd: #713f12;
    --plan-silver-bg: #1f2937; --plan-silver-tx: #cbd5e1; --plan-silver-bd: #374151;
    --plan-bronze-bg: #3a2410; --plan-bronze-tx: #fdba74; --plan-bronze-bd: #7c2d12;
    --note-bg: #3a3410; --note-tx: #fde047; --note-bd: #713f12;
    --shadow-sm: 0 2px 4px rgba(0,0,0,.3);
    --shadow-md: 0 2px 10px rgba(0,0,0,.35);
    --shadow-lg: 0 4px 20px rgba(0,0,0,.45);
    --shadow-pop: 0 10px 30px rgba(0,0,0,.55);
    color-scheme: dark;
  }
}

/* ============ دارک‌مود: انتخابِ صریحِ کاربر (بر media query غالب) ============ */
:root[data-theme="dark"] {
  --ink: #f8fafc; --text: #e2e8f0; --text-muted: #94a3b8; --text-faint: #64748b;
  --bg: #0b1220; --surface: #1e293b; --surface-2: #172033;
  --border: #334155; --border-strong: #475569;
  --primary-soft: #1e3a5f; --primary-ink: #93c5fd;
  /* کرومِ تیره — همان ظاهرِ قبلیِ هدر، حالا فقط در تمِ شب */
  --chrome-1: #1e293b; --chrome-2: #0f172a;
  --chrome-text: #cbd5e1; --chrome-text-active: #ffffff; --chrome-text-dim: #64748b;
  --chrome-line: rgba(255, 255, 255, .25);
  --chrome-hover: rgba(255, 255, 255, .08);
  --chrome-tint: rgba(255, 255, 255, .05);
  --chrome-tint-2: rgba(255, 255, 255, .09);
  --chrome-shadow: 0 5px 8px rgba(0, 0, 0, .22);
  --sw-knob: #eceefb;
  /* شب: خط و گلیف دقیقاً هم‌رنگِ قبضهٔ سوییچ. عمداً var(--sw-knob) است نه کدِ
     خام، تا اگر رنگِ قبضه عوض شد این خودکار با آن بماند (منبعِ یگانه). */
  --hdr-ctl-ink: var(--sw-knob);
  --brand-logo: #ffffff;   /* شب: لوگوی سفید روی کرومِ تیره */
  --st-unread-bg: #3b1a1a; --st-unread-tx: #fca5a5; --st-unread-bd: #7f1d1d;
  --st-prog-bg: #3a3410;   --st-prog-tx: #fde047;   --st-prog-bd: #713f12;
  --st-wait-bg: #1e2044;   --st-wait-tx: #c7d2fe;   --st-wait-bd: #3730a3;
  --st-done-bg: #0f2e1d;   --st-done-tx: #86efac;   --st-done-bd: #166534;
  --st-closed-bg: #1f2937; --st-closed-tx: #cbd5e1; --st-closed-bd: #374151;
  --urg-low-bg: #1f2937;  --urg-low-tx: #cbd5e1;
  --urg-med-bg: #1e3a5f;  --urg-med-tx: #93c5fd;
  --urg-high-bg: #3a2410; --urg-high-tx: #fdba74;
  --urg-urgent-bg: #3b1a1a; --urg-urgent-tx: #fca5a5;
  --plan-gold-bg: #3a3410; --plan-gold-tx: #fde047; --plan-gold-bd: #713f12;
  --plan-silver-bg: #1f2937; --plan-silver-tx: #cbd5e1; --plan-silver-bd: #374151;
  --plan-bronze-bg: #3a2410; --plan-bronze-tx: #fdba74; --plan-bronze-bd: #7c2d12;
  --note-bg: #3a3410; --note-tx: #fde047; --note-bd: #713f12;
  --shadow-sm: 0 2px 4px rgba(0,0,0,.3);
  --shadow-md: 0 2px 10px rgba(0,0,0,.35);
  --shadow-lg: 0 4px 20px rgba(0,0,0,.45);
  --shadow-pop: 0 10px 30px rgba(0,0,0,.55);
  color-scheme: dark;
}