/* public/css/ezlan-tokens.css — توکن‌های مشترک طراحی EzLan
   رنگ، فاصله، شعاع، سایه و تایپوگرافی؛ در صفحهٔ اصلی، بازی‌ها، بلاگ و صفحات SEO
   یکسان استفاده می‌شن. هیچ منطق یا سلکتور صفحه‌ای این‌جا نیست. */

:root {
  /* سطوح */
  --bg: #f4f3ee; /* پس‌زمینهٔ استخوانی */
  --surface: #fbfaf6; /* کارت و پنل */
  --surface-2: #f0efe8; /* سطح فرو‌رفته / ورودی‌ها */
  --surface-3: #e8e7df; /* هاور و چیپ‌ها */
  --line: #e0dfd6; /* خط‌کشی ظریف */
  --line-strong: #cbcabf;

  /* متن */
  --ink: #1b2420; /* ذغالی */
  --ink-2: #4b5651; /* متن ثانویه، کنتراست ~7:1 */
  --ink-3: #66706a; /* متن کم‌اهمیت، کنتراست ~4.8:1 */
  --on-accent: #ffffff;

  /* توکن‌های کمکی که در حالت تیره عوض می‌شن */
  --nav-bg: rgba(244, 243, 238, 0.94);
  --field-bg: #ffffff;
  --surface-rgb: 251, 250, 246;
  --badge-ip: #5a4a8a;
  --badge-ip-bg: rgba(90, 74, 138, 0.08);
  --badge-ip-line: rgba(90, 74, 138, 0.3);
  --badge-direct: #2d5a85;
  --badge-direct-bg: rgba(45, 90, 133, 0.08);
  --badge-direct-line: rgba(45, 90, 133, 0.3);
  color-scheme: light;

  /* رنگ تأکیدی: سبز جنگلی */
  --accent: #2c6652;
  --accent-hover: #245543;
  --accent-ink: #25594a; /* متن/آیکون سبز روی پس‌زمینهٔ روشن */
  --accent-soft: rgba(44, 102, 82, 0.08);
  --accent-soft-2: rgba(44, 102, 82, 0.14);
  --accent-line: rgba(44, 102, 82, 0.32);

  /* وضعیت‌ها (همیشه همراه متن/آیکون) */
  --success: #2b7a4b;
  --danger: #b03a2e;
  --danger-soft: rgba(176, 58, 46, 0.08);
  --danger-line: rgba(176, 58, 46, 0.35);

  /* شعاع، سایه */
  --r-sm: 8px;
  --r-md: 10px;
  --r-lg: 14px;
  --r-pill: 999px;
  --shadow-1: 0 1px 2px rgba(27, 36, 32, 0.05);
  --shadow-2: 0 2px 8px rgba(27, 36, 32, 0.07), 0 1px 2px rgba(27, 36, 32, 0.05);
  --shadow-3: 0 18px 40px -12px rgba(27, 36, 32, 0.22);
  --overlay: rgba(27, 36, 32, 0.45);

  /* فاصله */
  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 48px;
  --s-8: 72px;

  /* تایپوگرافی */
  --font: "Vazirmatn", system-ui, -apple-system, "Segoe UI", Tahoma, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --fs-xs: 12px;
  --fs-sm: 13.5px;
  --fs-md: 15px;
  --lh-body: 1.9;

  /* قاب‌ها */
  --nav-h: 64px;
  --page-w: 1280px;
}

/* ---------- حالت تیره ----------
   همان پالت برند (Forest / Leaf / Mint / Ivory) ولی روی سطوح جنگلیِ عمیق.
   data-theme قبل از اولین رندر توسط اسکریپت کوچک داخل <head> ست می‌شه (بدون فلش). */
:root[data-theme="dark"] {
  color-scheme: dark;

  --bg: #0d1713;
  --surface: #13221c;
  --surface-2: #182a23;
  --surface-3: #20352d;
  --line: #27403a;
  --line-strong: #38574d;

  --ink: #eef1e8;
  --ink-2: #bcc9bf;
  --ink-3: #8fa499;
  --on-accent: #ffffff;

  --accent: #2f7a60;
  --accent-hover: #378a6c;
  --accent-ink: #8bb99a;
  --accent-soft: rgba(139, 185, 154, 0.1);
  --accent-soft-2: rgba(139, 185, 154, 0.18);
  --accent-line: rgba(139, 185, 154, 0.38);

  --success: #6cc597;
  --danger: #ef8b7c;
  --danger-soft: rgba(239, 139, 124, 0.1);
  --danger-line: rgba(239, 139, 124, 0.42);

  --shadow-1: 0 1px 2px rgba(0, 0, 0, 0.35);
  --shadow-2: 0 2px 10px rgba(0, 0, 0, 0.38), 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-3: 0 22px 48px -12px rgba(0, 0, 0, 0.6);
  --overlay: rgba(3, 9, 7, 0.68);

  --nav-bg: rgba(13, 23, 19, 0.92);
  --field-bg: #0f1d18;
  --surface-rgb: 19, 34, 28;
  --badge-ip: #c3b9ef;
  --badge-ip-bg: rgba(195, 185, 239, 0.1);
  --badge-ip-line: rgba(195, 185, 239, 0.36);
  --badge-direct: #9fc5ec;
  --badge-direct-bg: rgba(159, 197, 236, 0.1);
  --badge-direct-line: rgba(159, 197, 236, 0.36);
}

/* تصاویر محتوایی در تیره کمی ملایم‌تر تا نور زیادی ندن (لوگوها و QR دست‌نخورده) */
:root[data-theme="dark"] .gl-cover img,
:root[data-theme="dark"] .gl-modal-cover img,
:root[data-theme="dark"] .post-card img,
:root[data-theme="dark"] .featured-card img,
:root[data-theme="dark"] .blog-content img,
:root[data-theme="dark"] .game-tile img {
  filter: brightness(0.9) saturate(0.95);
}

/* ---------- گذار بین حالت‌ها ----------
   مرورگرهای دارای View Transitions: دایرهٔ در حال گسترش از خود سوییچ (theme.js).
   بقیه: محو نرم رنگ‌ها. */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}
::view-transition-old(root) {
  z-index: 1;
}
::view-transition-new(root) {
  z-index: 2;
}
:root.theme-fade *,
:root.theme-fade *::before,
:root.theme-fade *::after {
  transition: background-color 0.6s ease, color 0.6s ease, border-color 0.6s ease,
    fill 0.6s ease, stroke 0.6s ease, box-shadow 0.6s ease, opacity 0.6s ease !important;
}
.theme-ring {
  position: fixed;
  z-index: 2147483000;
  width: 40px;
  height: 40px;
  margin: -20px 0 0 -20px;
  border-radius: 50%;
  border: 2px solid var(--accent-ink);
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font);
}

::selection {
  background: var(--accent-soft-2);
}

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}