/* =====================================================================
   ZeroConnect — کارت‌بانک | Panel tokens
   منبع همه‌ی رنگ‌ها، سایه‌ها، شعاع‌ها، فونت‌ها و حرکت: سیستم طراحی ZERONEX
   (assets/css/zeronex-bootstrap.css). این فایل فقط «نام مستعار» (--zc-*) برای
   توکن‌های معنایی DS تعریف می‌کند تا CSS پنل خودبه‌خود از DS پیروی کند.
   هیچ مقدار هگز خامی این‌جا نیست؛ تم تیره/روشن را data-bs-theme روی <html>
   تعیین می‌کند (تیره = پیش‌فرض برند) و همه‌ی این نام‌ها با آن عوض می‌شوند.
   ===================================================================== */

:root,
[data-bs-theme] {
  /* ---------- Colour roles ---------- */
  --zc-bg: var(--bg-canvas);
  --zc-surface: var(--bg-surface);
  --zc-on-surface: var(--fg-primary);
  --zc-on-surface-variant: var(--fg-secondary);
  --zc-outline: var(--border-default);
  /* blurred canvas, like the DS .navbar */
  --zc-glass: color-mix(in srgb, var(--bg-canvas) 78%, transparent);

  /* ---------- Spacing (DS --zx-s-*, 4pt grid) ---------- */
  --zc-space-2: var(--zx-s-2);
  --zc-space-3: var(--zx-s-3);
  --zc-space-4: var(--zx-s-4);
  --zc-space-6: var(--zx-s-5);      /* 24 */
  --zc-gutter: var(--zx-s-4);

  /* ---------- Elevation (DS --shadow-*) ---------- */
  --zc-elev-1: var(--shadow-xs);
  --zc-elev-2: var(--shadow-sm);
  --zc-elev-card: var(--shadow-md);

  /* ---------- Typography ----------
     Persian UI = Vazirmatn (DS --zx-font-fa). The DS type scale is used where it
     matches; display / body-sm / caption are mobile-app sizes the DS scale
     doesn't have (kept ≥12px so Persian stays legible). */
  --zc-font: var(--zx-font-fa);
  --zc-fs-display: 30px;
  --zc-fs-headline: var(--zx-fs-h3);      /* 24 */
  --zc-fs-title-lg: var(--zx-fs-h4);      /* 20 */
  --zc-fs-title: var(--zx-fs-lg);         /* 17 */
  --zc-fs-body: var(--zx-fs-base);        /* 15 */
  --zc-fs-body-sm: 14px;
  --zc-fs-label: var(--zx-fs-sm);         /* 13 */
  --zc-fs-caption: 12px;
  --zc-lh: var(--zx-lh-base);

  /* ---------- Layout (app shell; no DS equivalent) ---------- */
  --zc-appbar-h: 56px;
  --zc-tabbar-h: 64px;
  --zc-rail-w: 92px;
  --zc-touch: 44px;
  --zc-content-max: 720px;
  --zc-safe-top: env(safe-area-inset-top, 0px);
  --zc-safe-bottom: env(safe-area-inset-bottom, 0px);
  --zc-safe-left: env(safe-area-inset-left, 0px);
  --zc-safe-right: env(safe-area-inset-right, 0px);

  /* ---------- Motion (DS --zx-d-* / --zx-ease-*) ---------- */
  --zc-dur-fast: var(--zx-d-fast);
  --zc-dur: var(--zx-d-base);
  --zc-ease: var(--zx-ease);

  /* ---------- Text-safe status colour ----------
     --warning is below 4.5:1 for small text on light surfaces → mix toward fg. */
  --zc-warning-text: var(--warning);
}
[data-bs-theme="light"] { --zc-warning-text: color-mix(in srgb, var(--warning) 72%, var(--fg-primary)); }

/* Radius / colour roles: use the DS tokens directly (--zx-r-*, --accent-soft,
   --fg-brand, --success-soft …); the --zc-* names above are kept only where the
   panel / card / public-page CSS and JS still reference them. */