/* ============================================================
   فونت — تنها جایی که فونت تعریف شده است.
   برای فونت برند: فایل را در public/fonts بگذارید و فقط
   آدرس src پایین را عوض کنید. نام "BrandFont" را دست نزنید.
   ============================================================ */
@font-face {
  font-family: "BrandFont";
  src: url("/fonts/Vazirmatn-Variable.woff2") format("woff2");
  font-weight: 100 900;
  font-display: swap;
}

:root {
  --font: "BrandFont", Tahoma, sans-serif;

  --clay: #C4673F;   /* خاک‌رس */
  --brick: #B4563A;  /* آجری تیره */
  --cream: #EFE3D0;  /* کرم */
  --beige: #D3BC90;  /* بژ */
  --olive: #C4A169;  /* خاکی زیتونی */
  --brown: #241C17;  /* قهوه‌ای تیره */
  --deep: #140D09;   /* قهوه‌ای عمیق */
  --green: #8DBE7E;  /* سبز — بخش «فعال» برنامه */

  --muted: rgba(239, 227, 208, 0.72);
  --line: rgba(239, 227, 208, 0.12);
  --soft: rgba(239, 227, 208, 0.04);
  --dim-bar: rgba(196, 161, 105, 0.55);
}

*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { background: var(--deep); }

body {
  font-family: var(--font);
  font-weight: 500;
  direction: rtl;
  color: var(--cream);
  background: linear-gradient(180deg, var(--brown) 0%, var(--deep) 100%) fixed;
  background-color: var(--deep);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
}

button, input, textarea, select { font: inherit; color: inherit; }
[hidden] { display: none !important; }

/* دکمه‌ی اصلی: خاک‌رس با متن تیره (خوانایی بهتر) */
.btn {
  border: 1px solid var(--line); background: transparent; color: var(--cream);
  border-radius: 12px; padding: 9px 16px; font-size: 14px; cursor: pointer;
  transition: background-color .15s, border-color .15s, opacity .15s;
}
.btn:hover:not(:disabled) { border-color: rgba(239, 227, 208, 0.4); }
.btn.primary { background: var(--clay); border-color: var(--clay); color: var(--deep); font-weight: 700; }
.btn.primary:hover:not(:disabled) { background: #D07650; border-color: #D07650; }
.btn.ghost { border-color: transparent; color: var(--muted); }
.btn.danger { color: #E39A7B; }
.btn:disabled { opacity: .45; cursor: default; }