/* ==========================================================================
   Peywend — Design Tokens (tokens.css)
   منبع واحد رنگ/فاصله/شعاع/اندازه/تایپوگرافی/حرکت برای «همه‌ی صفحه‌های کاربری».
   بعد از ios*.css لود می‌شود و توکن‌های قدیمی (--bg-deep, --text, --primary, …) را
   به توکن‌های --pw-* وصل می‌کند. استایل کامپوننت‌های چت: chat.css
   ========================================================================== */

@font-face {
  font-family: 'IRANSansWeb';
  src: url('../fonts/IRANSansWeb.ttf') format('truetype');
  font-weight: normal; font-style: normal; font-display: swap;
}

/* ── ۱. توکن‌ها: تم تیره (طراحی مستقل، نه معکوسِ تم روشن) ─────────────────── */
:root {
  /* رنگ */
  --pw-primary: #2c6df0;            /* برند — سفید روی آن ≈ 4.6:1 */
  --pw-primary-press: #2460d6;
  --pw-secondary: #8b95a8;          /* عناصر ثانویه (آیکون خنثی) */
  --pw-bg: #0e1118;                 /* پس‌زمینه — نه سیاه مطلق */
  --pw-surface: #151a23;            /* هدر، کادر پیام */
  --pw-surface-elevated: #1c2230;   /* منو، شیت، کارت */
  --pw-incoming: #1f2533;
  --pw-outgoing: #2c6df0;
  --pw-on-outgoing: #ffffff;
  --pw-on-outgoing-muted: rgba(255, 255, 255, 0.82);
  --pw-text: #e6eaf2;               /* نه سفید خالص */
  --pw-text-2: #9aa4b6;             /* روی bg ≈ 7:1 */
  --pw-border: rgba(255, 255, 255, 0.09);
  --pw-divider: rgba(255, 255, 255, 0.07);
  --pw-success: #3ccf6e;
  --pw-warning: #f0a53a;
  --pw-error: #ff6b61;              /* روی incoming ≈ 5:1 */
  --pw-link: #7db0ff;
  --pw-online: #3ccf6e;
  --pw-skeleton-a: #1b2130;
  --pw-skeleton-b: #262d3f;
  /* نوار بالایی یکسان (هدر + فیلترها + هدر صفحه‌های فرعی): شیشه‌ی کم‌رنگ‌تر، تقریباً مات تا محتوای زیرش قاطی نشود */
  --pw-bar-bg: rgba(14, 17, 24, 0.94);
  --pw-bar-blur: blur(12px) saturate(140%);
  --pw-bar-line: rgba(255, 255, 255, 0.07);
  /* والپیپر چت */
  --pw-wall-bg: radial-gradient(120% 70% at 85% 0%, rgba(44,109,240,.14) 0%, transparent 60%), linear-gradient(180deg, #0f1420 0%, #0c1018 100%);
  --pw-wall-ink: rgba(150, 175, 230, 0.075);
  --pw-dock-bg: rgba(21, 26, 36, 0.80);
  --pw-dock-border: rgba(255, 255, 255, 0.10);
  --pw-dock-shadow: 0 12px 32px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.05);

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

  /* شعاع */
  --rd-xs: 6px; --rd-sm: 10px; --rd-md: 14px; --rd-lg: 20px;
  --rd-bubble: 18px; --rd-tail: 6px; --rd-pill: 999px;

  /* ابعاد */
  --hit: 44px;                      /* حداقل ناحیه لمس */
  --btn: 40px;                      /* دکمه آیکونی */
  --ico: 20px;
  --header-h: 56px;
  --composer-min: 44px;
  --bubble-max: 78%;
  --media-max-w: 260px;
  --media-max-h: 340px;

  /* تایپوگرافی — یک فونت، دو وزن (۴۰۰ و ۶۰۰) */
  --font: "IRANSansWeb", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --fs-title: 16px; --fs-body: 15px; --fs-sub: 13px; --fs-meta: 11px;
  --lh-body: 1.65; --lh-tight: 1.35;
  --fw-regular: 400; --fw-strong: 600;

  /* حرکت */
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --dur-press: 120ms; --dur-fast: 160ms; --dur-base: 220ms;
}

/* ── تم روشن: پالت اختصاصی ─────────────────────────────────────────────── */
body.light-theme, body.lt {
  --pw-primary: #0a6cf0;
  --pw-primary-press: #0958c4;
  --pw-secondary: #667085;
  --pw-bg: #f2f4f8;
  --pw-surface: #ffffff;
  --pw-surface-elevated: #ffffff;
  --pw-incoming: #ffffff;
  --pw-outgoing: #0a6cf0;
  --pw-text: #121722;
  --pw-text-2: #5b6578;             /* روی سفید ≈ 6:1 */
  --pw-border: rgba(30, 40, 66, 0.12);
  --pw-divider: rgba(30, 40, 66, 0.09);
  --pw-success: #1f8a43;
  --pw-warning: #a85f00;
  --pw-error: #c9231a;              /* روی سفید ≈ 5.9:1 */
  --pw-link: #0a58c9;
  --pw-online: #1f9d4d;
  --pw-skeleton-a: #e6eaf2;
  --pw-skeleton-b: #f4f6fa;
  --pw-bar-bg: rgba(255, 255, 255, 0.95);
  --pw-bar-blur: blur(12px) saturate(140%);
  --pw-bar-line: rgba(30, 40, 66, 0.09);
  --pw-wall-bg: radial-gradient(120% 70% at 85% 0%, rgba(44,109,240,.10) 0%, transparent 60%), linear-gradient(180deg, #e9eef8 0%, #e3e9f4 100%);
  --pw-wall-ink: rgba(52, 80, 140, 0.10);
  --pw-dock-bg: rgba(255, 255, 255, 0.84);
  --pw-dock-border: rgba(30, 40, 66, 0.10);
  --pw-dock-shadow: 0 12px 30px rgba(24, 36, 70, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}


/* ── اتصال توکن‌های قدیمی به --pw-* ─────────────────────────────────────────
   باید روی هر دو ریشه (:root و body تم‌دار) تعریف شود تا با تغییر تم دوباره محاسبه شود. */
:root, body.light-theme, body.lt {
  --bg-deep: var(--pw-bg);
  --bg-elevated: var(--pw-surface);
  --bg-surface: var(--pw-surface-elevated);
  --text: var(--pw-text);
  --text-muted: var(--pw-text-2);
  --primary: var(--pw-primary);
  --accent: var(--pw-link);
  --incoming: var(--pw-incoming);
  --outgoing: var(--pw-outgoing);
  --separator: var(--pw-divider);
  --glass-border: var(--pw-border);
  --success: var(--pw-success);
  --warning: var(--pw-warning);
  --danger: var(--pw-error);
  --online: var(--pw-online);
  --bg: var(--pw-bg);
  --muted: var(--pw-text-2);
  --err: var(--pw-error);
  --border: var(--pw-border);
}

/* ── دسترس‌پذیری سراسری ─────────────────────────────────────────────────── */
:where(a, button, [role="button"], input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--pw-link); outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  *:not(.chat-media-spinner):not(.spinner), *:not(.chat-media-spinner):not(.spinner)::before, *:not(.chat-media-spinner):not(.spinner)::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}
@media (prefers-contrast: more) {
  :root { --pw-border: rgba(255,255,255,.28); --pw-text-2: #c1c9d8; }
  body.light-theme, body.lt { --pw-border: rgba(0,0,0,.4); --pw-text-2: #333b4d; }
}