/* توکن‌های طراحی — پنلِ نویسنده و پایهٔ صفحه‌های عمومی.
   در صفحه‌های عمومی، رنگ‌های هر سایت (هویتِ بصری) از engine/theme.py روی همین‌ها می‌نشینند. */
@font-face { font-family: "Vazirmatn"; src: url("../fonts/Vazirmatn-Variable.f6d31671339d.woff2") format("woff2");
  font-weight: 100 900; font-display: swap; }

:root {
  --lapis: #1D3C78;
  --lapis-soft: #E6ECF7;
  --turquoise: #178F86;
  --turquoise-soft: #E2F3F1;
  --turquoise-text: #0F766E;
  --saffron: #E2A23B;
  --saffron-soft: #FBF0DC;
  --pomegranate: #C2453B;
  --pomegranate-soft: #F9E6E3;
  --paper: #F2F4F8;
  --card: #FFFFFF;
  --ink: #172133;
  --ink-soft: #5A6478;
  --line: #DDE2EC;
  --r-sm: 8px;
  --r: 14px;
  --r-lg: 22px;
  --r-pill: 999px;
  /* مقیاسِ اندازهٔ قلم — فقط همین هفت پله: ۱۳، ۱۴، ۱۶، ۱۸، ۲۱، ۲۶، ۳۴ پیکسل */
  --fs-1: .8125rem;
  --fs-2: .875rem;
  --fs-3: 1rem;
  --fs-4: 1.125rem;
  --fs-5: 1.3125rem;
  --fs-6: 1.625rem;
  --fs-7: 2.125rem;
  --lift: 0 1px 2px rgba(23, 33, 51, .05), 0 6px 20px rgba(29, 60, 120, .07);
  --ui: "Vazirmatn", "Segoe UI", Tahoma, sans-serif;
  color-scheme: light dark;
}

/* حالتِ شب: از تنظیمِ دستگاه. رنگِ اصلیِ سایت در شب روشن‌تر می‌شود (--accent-dark). */
@media (prefers-color-scheme: dark) {
  :root {
    --lapis: var(--accent-dark, #8FB0EC);
    --lapis-soft: #1C2A4A;
    --turquoise: #3CC2B6;
    --turquoise-soft: #123733;
    --turquoise-text: #3CC2B6;
    --saffron: #EDB65A;
    --saffron-soft: #3A2E18;
    --pomegranate: #EB7B70;
    --pomegranate-soft: #3B1F1C;
    --paper: #0F1729;
    --card: #17213A;
    --ink: #E6EAF2;
    --ink-soft: #9DA8BD;
    --line: #27324D;
    --lift: 0 1px 2px rgba(0, 0, 0, .35), 0 8px 24px rgba(0, 0, 0, .25);
  }
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; font-family: var(--ui); font-size: 1rem; line-height: 1.85;
       background: var(--paper); color: var(--ink); }
a { color: var(--lapis); text-decoration: none; }
a:hover { text-decoration: underline; }
:focus-visible { outline: 3px solid var(--saffron); outline-offset: 2px; border-radius: 4px; }
h1, h2, h3 { line-height: 1.45; }
img { max-width: 100%; height: auto; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-2); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px;
       font: inherit; font-weight: 700; font-size: var(--fs-3); cursor: pointer;
       padding: 9px 20px; border-radius: var(--r-pill); border: 1.5px solid var(--lapis);
       background: var(--lapis); color: var(--accent-ink, #fff); text-decoration: none; }
.btn:hover { text-decoration: none; filter: brightness(1.08); }
.btn-quiet { background: transparent; color: var(--lapis); }
.btn-quiet:hover { background: var(--lapis-soft); filter: none; }
.btn-sm { padding: 5px 14px; font-size: var(--fs-2); }
@media (prefers-color-scheme: dark) { :root { --accent-ink: #0F1729; } }