/* ============================================================
   زیگ‌زاگ — فونت و توکن‌های رنگ، یک منبع برای همه‌جا (۲۰۲۶-۱۰-۱۴)
   تمِ روشن و تیره (سعید: «دارک مد پلتفرم خیلی افتضاحه. درستش کن و یه ورژن لایت هم براش بساز.»). این فایل را هر صفحه‌ای
   می‌خوانَد: دو پنل و پوستهٔ مشاوره (بعد از theme/css/styles.css و پیش از custom.css، تا توکن‌های Metronic را بازتعریف کند)،
   و صفحه‌های تک که custom.css ندارند (ورود و ثبت‌نام، فرمِ عمومیِ MCN، صفحه‌های خطا…؛ layouts.partials.standalone-tokens).
   فایلِ ثابت است: در ۵۰۰ و ۵۰۳ و حالتِ نگه‌داری هم nginx آن را می‌دهد.

   :root = روشن، .dark = تیره (کلاس را layouts.partials.theme-boot پیش از هر CSS روی <html> می‌گذارد؛ پیش‌فرض مطابقِ دستگاه).
   توکن‌های Metronic (--background، --card، --primary…) را kt-* و یوتیلیتی‌ها می‌خوانند؛ --zz-* ها معناییِ خودمان‌اند.
   قاعده: هیچ قاعدهٔ تازه‌ای رنگِ ثابت (hex/rgb) نمی‌گیرد؛ یکی از این توکن‌ها، یا color-mix از آن‌ها. رنگی که فقط روی زمینهٔ
   تیره کار می‌کند (rgba(255,255,255,…)) در حالتِ روشن نامرئی است. مقدارِ یک توکن فقط همین‌جا عوض می‌شود.
   ============================================================ */
/* فونتِ Ravagh FaNum (رقم‌ها فارسی دیده می‌شوند؛ کاراکترِ زیرین لاتین می‌ماند) */
@font-face{ font-family:'Ravagh'; src:url('/fonts/ravagh/RavaghFaNum-ExtraLight.ttf') format('truetype'); font-weight:200; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ravagh'; src:url('/fonts/ravagh/RavaghFaNum-Light.ttf') format('truetype'); font-weight:300; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ravagh'; src:url('/fonts/ravagh/RavaghFaNum-Regular.ttf') format('truetype'); font-weight:400; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ravagh'; src:url('/fonts/ravagh/RavaghFaNum-Medium.ttf') format('truetype'); font-weight:500; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ravagh'; src:url('/fonts/ravagh/RavaghFaNum-SemiBold.ttf') format('truetype'); font-weight:600; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ravagh'; src:url('/fonts/ravagh/RavaghFaNum-Bold.ttf') format('truetype'); font-weight:700; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ravagh'; src:url('/fonts/ravagh/RavaghFaNum-ExtraBold.ttf') format('truetype'); font-weight:800; font-style:normal; font-display:swap; }
@font-face{ font-family:'Ravagh'; src:url('/fonts/ravagh/RavaghFaNum-Black.ttf') format('truetype'); font-weight:900; font-style:normal; font-display:swap; }

/* ── مقیاسِ تایپوگرافی: هفت پله، یک منبع (۲۰۲۶-۱۰-۲۵) ───────────────────────────────────────────────────────────────
   سعید: «حس میکنم اندازه‌ی فونت‌ها متناسب نیستن و کاملا غیر استانداردن»؛ از نمونه‌ها گزینهٔ ۱ را برگزید («۱»).
   هر متنی در پلتفرم یکی از این هفت اندازه است — نه عددِ px در قاعده‌ها، نه نیم‌پیکسل:
     ۱۳ توضیح، زمان، بج، مسیرِ صفحه · ۱۴ متنِ فرعی، برچسبِ فیلد، سرستونِ جدول، زبانه، دکمهٔ کوچک
     ۱۵ رابط: فیلد، دکمه، خانهٔ جدول، منو، هشدار · ۱۶ متنِ خواندنی · ۱۸ عنوانِ کارت · ۲۲ عنوانِ صفحه · ۲۸ عددِ آمار
   نام‌ها همان نام‌های Tailwind/Metronic است، پس کلاس‌های text-* و اجزای kt-* (که var(--text-*) می‌خوانند) خودشان روی این
   پله‌ها می‌نشینند و leading-* دوباره کار می‌کند. --text-2xs و --text-3xl به بالا دست نخورده‌اند: فقط اندازهٔ آیکن‌اند.
   قاعدهٔ تازه font-size را فقط با var(--text-…) می‌گیرد (tests/Unit/TypeScaleTest). ارتفاعِ خط روی پیکسلِ گرد می‌افتد. */
:root{
  --text-xs:.8125rem;   --text-xs--line-height:1.54;    /* ۱۳ / ۲۰ */
  --text-2sm:.875rem;   --text-2sm--line-height:1.572;  /* ۱۴ / ۲۲ */
  --text-sm:.9375rem;   --text-sm--line-height:1.6;     /* ۱۵ / ۲۴ */
  --text-base:1rem;     --text-base--line-height:1.75;  /* ۱۶ / ۲۸ */
  --text-lg:1.125rem;   --text-lg--line-height:1.556;   /* ۱۸ / ۲۸ */
  --text-xl:1.375rem;   --text-xl--line-height:1.455;   /* ۲۲ / ۳۲ */
  --text-2xl:1.75rem;   --text-2xl--line-height:1.286;  /* ۲۸ / ۳۶ */
}

:root{
  /* — توکن‌های Metronic — */
  --background:#f4f5f8; --foreground:#1d2129;
  --card:#ffffff; --card-foreground:#1d2129;
  --popover:#ffffff; --popover-foreground:#1d2129;
  --primary:#6a4ee6; --primary-foreground:#ffffff;
  --secondary:#eef0f4; --secondary-foreground:#555c6b;
  --muted:#f1f2f5; --muted-foreground:#686e7c;
  --accent:#f0f1f5; --accent-foreground:#1d2129;
  --destructive:#dc2626; --destructive-foreground:#ffffff;
  --mono:#0f1218; --mono-foreground:#ffffff;
  --border:#e3e5ea; --input:#d6d9e0; --ring:color-mix(in oklab,#6a4ee6 45%,transparent);
  --radius:.625rem;

  /* — توکن‌های معناییِ زیگ‌زاگ — */
  --zz-surface-2:#f8f9fb;         /* کاشیِ داخلِ کارت */
  --zz-surface-3:#f1f2f5;         /* چاهک، کد، چیپ */
  --zz-field:#ffffff;             /* زمینهٔ فیلد */
  --zz-line-strong:#d2d5dd;       /* مرزِ پررنگ‌تر (دکمهٔ outline، فیلد) */
  --zz-hover:#f2f3f6;
  --zz-brand-hover:#5a3fd6;
  --zz-brand-text:#5a3fd6;        /* متنِ برند روی کارت (لینک، تبِ فعال) */
  /* متنِ وضعیت (روی زمینهٔ ملایمِ خودش دست‌کم ۵ به ۱) و -solid برای پُرکردن با متنِ سفید (دست‌کم ۴٫۵ به ۱) */
  --zz-success:#166534; --zz-success-solid:#15803d;
  --zz-warning:#92400e; --zz-warning-solid:#b45309;
  --zz-danger:#b91c1c;  --zz-danger-solid:#dc2626;
  --zz-info:#1d4ed8;    --zz-info-solid:#2563eb;
  --zz-shadow:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.05);
  --zz-shadow-pop:0 14px 34px -10px rgba(16,24,40,.18);
  --zz-chart-ink:#686e7c; --zz-chart-grid:#eceef2;
  --zz-chart-1:#6a4ee6; --zz-chart-2:#0ea5e9; --zz-chart-3:#10b981; --zz-chart-4:#f59e0b; --zz-chart-5:#f43f5e;

  /* مشتق‌ها — یک بار، برای هر دو حالت (روی همان <html> از مقدارِ حالتِ جاری حساب می‌شوند) */
  --zz-brand:var(--primary);
  --zz-brand-soft:color-mix(in oklab,var(--primary) 11%,transparent);
  --zz-brand-line:color-mix(in oklab,var(--primary) 34%,transparent);
  --zz-success-soft:color-mix(in oklab,var(--zz-success) 12%,transparent);
  --zz-success-line:color-mix(in oklab,var(--zz-success) 30%,transparent);
  --zz-warning-soft:color-mix(in oklab,var(--zz-warning) 13%,transparent);
  --zz-warning-line:color-mix(in oklab,var(--zz-warning) 32%,transparent);
  --zz-danger-soft:color-mix(in oklab,var(--zz-danger) 11%,transparent);
  --zz-danger-line:color-mix(in oklab,var(--zz-danger) 30%,transparent);
  --zz-info-soft:color-mix(in oklab,var(--zz-info) 11%,transparent);
  --zz-info-line:color-mix(in oklab,var(--zz-info) 30%,transparent);
  --zz-overlay:rgb(15 18 24 / .55);
  /* فلزِ دسته‌های مشتری (مدالِ دسته، ۲۰۲۶-۱۰-۱۶): hi / mid / lo برای حلقه و مدال، ink برای متن */
  --zz-gold-hi:#f6d67a; --zz-gold-mid:#d29f2a; --zz-gold-lo:#946410; --zz-gold-ink:#8a5a00;
  --zz-silver-hi:#f3f5f9; --zz-silver-mid:#b3bcc8; --zz-silver-lo:#6f7a8a; --zz-silver-ink:#566070;
  --zz-bronze-hi:#f1bb8c; --zz-bronze-mid:#bf7743; --zz-bronze-lo:#7a401e; --zz-bronze-ink:#8a4b22;
  /* استودیوی «لایو استریم» (۲۰۲۶-۱۰-۲۴): سطحِ پخش‌کننده در هر دو تم تیره است (قابِ ویدیو)، و رنگِ نشانِ هر پلتفرم — در هر دو تم یکی */
  --zz-player-bg:#06070a; --zz-player-ink:#ffffff; --zz-player-text:#c9ccd3; --zz-player-muted:#9aa0ab;
  --zz-player-line:#2b2f39; --zz-player-field:#12141a; --zz-player-raise:#20242d; --zz-player-ring:#4a4f5b;
  --zz-player-chip:rgb(0 0 0 / .62); --zz-player-scrim:rgb(0 0 0 / .7);
  --zz-pf-ink:#ffffff; --zz-pf-youtube:#e62117; --zz-pf-twitch:#9146ff; --zz-pf-kick:#53fc18; --zz-pf-kick-ink:#0b0b0b;
  --zz-pf-aparat:#ed145b; --zz-pf-facebook:#1877f2; --zz-pf-custom:#5b6170;
  /* اورلی‌های پخش (۲۰۲۶-۱۰-۲۸، live/overlays): روی تصویرِ پخش و مستقل از تمِ دستگاه — در ‎.dark‎ عوض نمی‌شوند */
  --zz-ovl-dark-bg:rgb(12 14 19 / .8); --zz-ovl-dark-raise:rgb(32 36 45 / .9); --zz-ovl-dark-ink:#ffffff; --zz-ovl-dark-text:#e4e6eb; --zz-ovl-dark-muted:#a9aeb9;
  --zz-ovl-dark-line:#343946;
  --zz-ovl-light-bg:rgb(255 255 255 / .94); --zz-ovl-light-raise:#f2f4f7; --zz-ovl-light-ink:#101828; --zz-ovl-light-text:#344054; --zz-ovl-light-muted:#667085;
  --zz-ovl-light-line:#d0d5dd;
  --zz-ovl-shadow:0 18px 40px -12px rgb(0 0 0 / .55); --zz-ovl-text-shadow:0 2px 6px rgb(0 0 0 / .55);
  --zz-ovl-gold:#e2b13f; --zz-ovl-gold-ink:#2e1f00; --zz-ovl-handle:#2f6bff;
  /* پوسته‌های اورلی (۲۰۲۶-۱۰-۲۸، LiveOverlayWidgets::SKINS، render-styles): هر پوسته رنگ‌های خودش را دارد، مستقل از تمِ دستگاه */
  --zz-skin-neon-a:#ff3fb4; --zz-skin-neon-b:#29e3ff; --zz-skin-neon-v:#b53cff; --zz-skin-neon-ink:#f4f6ff; --zz-skin-neon-bg:rgb(10 6 24 / .86);
  --zz-skin-neon-raise:rgb(255 63 180 / .16); --zz-skin-neon-glow:rgb(255 63 180 / .45); --zz-skin-neon-glow2:rgb(41 227 255 / .25);
  --zz-skin-neon-glow3:rgb(255 63 180 / .7); --zz-skin-neon-glow4:rgb(41 227 255 / .45); --zz-skin-neon-deep:#0a0414; --zz-skin-neon-dusk:#5a1a7a;
  --zz-skin-edge-a:#ff6a1a; --zz-skin-edge-a2:#ff8c4a; --zz-skin-edge-ink:#f7f3ee; --zz-skin-edge-bg:#17191f; --zz-skin-edge-bg2:#23262e;
  --zz-skin-edge-deep:#121318; --zz-skin-edge-mid:#2a2d36; --zz-skin-edge-flash:rgb(255 255 255 / .9);
  --zz-skin-glass-a:#8b7cff; --zz-skin-glass-b:#4fd1c5; --zz-skin-glass-ink:#ffffff; --zz-skin-glass-muted:rgb(255 255 255 / .78);
  --zz-skin-glass-fill:rgb(255 255 255 / .26); --zz-skin-glass-fill2:rgb(255 255 255 / .1); --zz-skin-glass-row:rgb(255 255 255 / .15);
  --zz-skin-glass-line:rgb(255 255 255 / .45); --zz-skin-glass-shadow:rgb(20 20 60 / .45); --zz-skin-glass-shine:rgb(255 255 255 / .35);
  --zz-skin-glass-gold:#fff3a6; --zz-skin-glass-sky1:#2b2f6b; --zz-skin-glass-sky2:#5b3d8f; --zz-skin-glass-sky3:#2b7a8b;
  --zz-skin-glass-blob1:#ff8fd1; --zz-skin-glass-blob2:#6ff0e0;
  --zz-skin-pixel-a:#ffd23f; --zz-skin-pixel-b:#3ee0b0; --zz-skin-pixel-b2:#2fb98f; --zz-skin-pixel-c:#ff5d73; --zz-skin-pixel-ink:#fdfbff;
  --zz-skin-pixel-bg:#2a1e4a; --zz-skin-pixel-raise:#3b2b66; --zz-skin-pixel-deep:#120b26; --zz-skin-pixel-sky:#160f2e; --zz-skin-pixel-hill:#5b3fa0;
  --zz-skin-pixel-star:#ffffff; --zz-skin-pixel-scan:rgb(0 0 0 / .18);
  --zz-skin-tazhib-a:#d8b25a; --zz-skin-tazhib-b:#f1d999; --zz-skin-tazhib-c:#b88a2c; --zz-skin-tazhib-ink:#fbf5e6; --zz-skin-tazhib-bg:#0f2756;
  --zz-skin-tazhib-hi:#17377a; --zz-skin-tazhib-sky:#1b3f8a; --zz-skin-tazhib-deep:#0a1b3d; --zz-skin-tazhib-line:rgb(216 178 90 / .5);
  --zz-skin-tazhib-dot:rgb(216 178 90 / .25); --zz-skin-tazhib-glow:rgb(216 178 90 / .45); --zz-skin-tazhib-shade:rgb(0 0 0 / .25);
  color-scheme:light;
}
.dark{
  --background:#0e1014; --foreground:#e3e6eb;
  --card:#16191f; --card-foreground:#e3e6eb;
  --popover:#1b1e25; --popover-foreground:#e3e6eb;
  --primary:#7056ec; --primary-foreground:#ffffff;   /* متنِ سفید روی آن ۵ به ۱؛ متنِ بنفش روی کارت --zz-brand-text است */
  --secondary:#22262e; --secondary-foreground:#a3a9b6;
  --muted:#1c1f26; --muted-foreground:#7d8392;
  --accent:#20242c; --accent-foreground:#eef0f3;
  --destructive:#e5484d; --destructive-foreground:#ffffff;
  --mono:#f4f5f7; --mono-foreground:#0e1014;
  --border:#262a33; --input:#30343e; --ring:color-mix(in oklab,#8f76f6 60%,transparent);

  --zz-surface-2:#1b1e25; --zz-surface-3:#121419; --zz-field:#111318;
  --zz-line-strong:#363b46; --zz-hover:#1f232b;
  --zz-brand-hover:#6449e0; --zz-brand-text:#b6a8ff;   /* hover ِ دکمه تیره‌تر، نه روشن‌تر */
  --zz-success:#4ade80; --zz-warning:#fbbf24; --zz-danger:#f87171; --zz-info:#60a5fa;
  --zz-shadow:none;
  --zz-shadow-pop:0 18px 42px -12px rgba(0,0,0,.65);
  --zz-chart-ink:#8a90a0; --zz-chart-grid:#232731;
  --zz-chart-1:#8b72ff; --zz-chart-2:#38bdf8; --zz-chart-3:#34d399; --zz-chart-4:#fbbf24; --zz-chart-5:#fb7185;
  --zz-brand-soft:color-mix(in oklab,var(--primary) 17%,transparent);
  --zz-brand-line:color-mix(in oklab,var(--primary) 42%,transparent);
  --zz-overlay:rgb(0 0 0 / .65);
  --zz-gold-hi:#ffe395; --zz-gold-mid:#e2b13f; --zz-gold-lo:#a3771b; --zz-gold-ink:#f2c45a;
  --zz-silver-hi:#f7f9fc; --zz-silver-mid:#c6cdd8; --zz-silver-lo:#858fa0; --zz-silver-ink:#cfd6e0;
  --zz-bronze-hi:#f8c8a0; --zz-bronze-mid:#d18c57; --zz-bronze-lo:#8f532b; --zz-bronze-ink:#e6a679;
  color-scheme:dark;
}
/* نام‌های --color-* ِ Tailwind روی :root حساب می‌شوند؛ این‌ها (اسکرول‌بار، تولتیپِ نمودار) هم دنبالِ توکن‌ها بیایند */
:root,.dark{
  --color-background:var(--background); --color-accent:var(--accent); --color-input:var(--input); --color-border:var(--border);
  --color-popover:var(--popover); --color-mono:var(--mono); --color-primary:var(--primary);
  --color-secondary-foreground:var(--secondary-foreground); --color-muted-foreground:var(--muted-foreground); --color-destructive:var(--destructive);
}
html.zz-theme-switching *,html.zz-theme-switching *::before,html.zz-theme-switching *::after{transition:none !important}