/* ==========================================================================
   Design System — پالت رنگی، تایپوگرافی و مؤلفه‌های پایه
   جهت: فارسی/RTL
   بر اساس MD/pmvault-design-spec.md — توکن‌های PMVault پیاده‌سازی شده،
   نام‌های متغیر قدیمی به‌عنوان alias نگه داشته شده‌اند تا کل کدبیس بدون
   تغییر مارک‌آپ به پالت جدید سوییچ کند.
   ========================================================================== */

@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn/Vazirmatn-Regular.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn/Vazirmatn-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn/Vazirmatn-SemiBold.woff2") format("woff2");
  font-weight: 600;
  font-display: swap;
}
@font-face {
  font-family: "Vazirmatn";
  src: url("../fonts/Vazirmatn/Vazirmatn-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

@font-face {
  font-family: "Shabnam";
  src: url("../fonts/Shabnam/Shabnam.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}
@font-face {
  font-family: "Shabnam";
  src: url("../fonts/Shabnam/Shabnam-Medium.woff2") format("woff2");
  font-weight: 500;
  font-display: swap;
}
@font-face {
  font-family: "Shabnam";
  src: url("../fonts/Shabnam/Shabnam-Bold.woff2") format("woff2");
  font-weight: 700;
  font-display: swap;
}

:root {
  /* ==== توکن‌های PMVault (MD/pmvault-design-spec.md) ==== */

  /* Brand */
  --pv-primary:        #FF941D;
  --pv-primary-hover:  #E8811A;
  --pv-primary-soft:   #FFF3E3;
  --pv-accent:         #03A9F4;
  --pv-accent-soft:    #E6F5FE;

  /* Surfaces */
  --pv-surface:        #FFFFFF;
  --pv-elevated:       #FAFAFA;
  --pv-sunken:         #F4F4F5;
  --pv-border:         #E1E1E1;
  --pv-border-strong:  #CFCFCF;

  /* Text */
  --pv-text:           #000000;
  --pv-text-muted:     #616161;
  --pv-text-faint:     #9A9A9A;
  --pv-text-invert:    #FFFFFF;

  /* Module hues — فقط برای لبه، آیکون و بج */
  --pv-task:           #04C39A;
  --pv-project:        #3078AB;
  --pv-chat:           #4B9FFF;
  --pv-inbox:          #FF8C7E;
  --pv-note:           #FFDB6D;
  --pv-people:         #BA68C8;

  /* Status */
  --pv-danger:         #FA7565;
  --pv-danger-soft:    #FFEDEA;
  --pv-warn:           #FFDB6D;
  --pv-warn-soft:      #FFF7DF;
  --pv-warn-text:      #8A6100;
  --pv-ok:             #04C39A;
  --pv-ok-soft:        #E6F8F4;

  /* Radius */
  --pv-r-chip:  3px;
  --pv-r-card:  5px;
  --pv-r-btn:   8px;
  --pv-r-pill:  50px;

  /* Spacing scale — فقط این چهار مقدار */
  --pv-s1: 4px;  --pv-s2: 8px;  --pv-s3: 12px;  --pv-s4: 16px;

  /* Elevation */
  --pv-e0: none;
  --pv-e1: 0 1px 2px rgba(0,0,0,.06);
  --pv-e2: 0 8px 10px -5px rgba(0,0,0,.20);
  --pv-e3: 0 16px 32px -8px rgba(0,0,0,.24);

  /* ==== alias به نام‌های قدیمی — تا مارک‌آپ فعلی دست‌نخورده کار کند ==== */
  --brand-400: var(--pv-primary);
  --primary-500: var(--pv-primary);
  --primary-600: var(--pv-primary-hover);
  --on-primary: #FFFFFF;
  --secondary-700: var(--pv-accent);
  --cta-500: var(--pv-accent);
  --cta-600: #0288C4;
  --accent: var(--pv-primary);

  --bg: var(--pv-sunken);
  --bg-subtle: var(--pv-elevated);
  --surface: var(--pv-surface);
  --surface-sunken: var(--pv-sunken);
  --text-primary: var(--pv-text);
  --text-secondary: var(--pv-text-muted);
  --text-muted: var(--pv-text-faint);
  --border: var(--pv-border);
  --divider: var(--pv-border);
  --focus: var(--pv-accent);

  --success-text: var(--pv-ok);
  --success-bg: var(--pv-ok-soft);
  --warning-text: var(--pv-warn-text);
  --warning-bg: var(--pv-warn-soft);
  --error-text: var(--pv-danger);
  --error-bg: var(--pv-danger-soft);
  --info-text: var(--pv-accent);
  --info-bg: var(--pv-accent-soft);

  --status-draft-bg: var(--pv-elevated);       --status-draft-text: var(--pv-text-muted);
  --status-review-bg: var(--pv-warn-soft);     --status-review-text: var(--pv-warn-text);
  --status-approved-bg: var(--pv-ok-soft);     --status-approved-text: var(--pv-ok);
  --status-published-bg: var(--pv-accent-soft);--status-published-text: var(--pv-accent);
  --status-inactive-bg: var(--pv-danger-soft); --status-inactive-text: var(--pv-danger);
  --status-archived-bg: var(--pv-elevated);    --status-archived-text: var(--pv-text-faint);

  /* ---- تایپوگرافی ---- */
  --font-ui: "Shabnam", "Vazirmatn", "Tahoma", sans-serif;
  --font-content: "Shabnam", "Vazirmatn", "Tahoma", sans-serif;
}

* { box-sizing: border-box; }

body {
  direction: rtl;
  font-family: var(--font-ui);
  background: var(--pv-sunken);
  color: var(--pv-text);
  font-size: 14px;
  line-height: 1.75;
}

::selection {
  background: var(--pv-accent-soft);
  color: var(--pv-text);
}

/* ---- تیترها ---- */
.text-h1 { font-size: 26px; line-height: 1.4;  font-weight: 700; }
.text-h2 { font-size: 21px; line-height: 1.4;  font-weight: 700; }
.text-h3 { font-size: 19px; line-height: 1.5;  font-weight: 700; }
.text-h4 { font-size: 16px; line-height: 1.5;  font-weight: 600; }
.text-h5 { font-size: 14px; line-height: 1.55; font-weight: 600; }
.text-h6 { font-size: 13px; line-height: 1.6;  font-weight: 600; }
.text-display {
  font-size: 34px;
  line-height: 1.2;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.text-body-lg { font-size: 16px; line-height: 1.8; }
.text-body    { font-size: 14px; line-height: 1.75; }
.text-body-sm { font-size: 13px; line-height: 1.75; }
.text-caption { font-size: 12px; line-height: 1.6; color: var(--pv-text-muted); }

.weight-regular  { font-weight: 400; }
.weight-medium   { font-weight: 500; }
.weight-semibold { font-weight: 600; }
.weight-bold     { font-weight: 700; }

/* صفحه: عنوان اصلی همیشه در نقش H1 دیده شود، حتی وقتی از کلاس text-h2 استفاده شده */
.page-header > div > h1,
.page-header > h1 {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.4;
}

/* ---- دکمه‌ها ---- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--pv-s2);
  height: 36px;
  padding-inline: var(--pv-s3);
  border-radius: var(--pv-r-btn);
  font-weight: 400;
  font-size: 14px;
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  transition: background-color .15s ease-out, border-color .15s ease-out, color .15s ease-out;
}

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

.btn.primary   { background: var(--pv-primary); color: #FFFFFF; }
.btn.primary:hover   { background: var(--pv-primary-hover); }

.btn.secondary { background: var(--pv-surface); color: var(--pv-text); border-color: var(--pv-border); }
.btn.secondary:hover { background: var(--pv-elevated); }

.btn.cta       { background: var(--pv-accent); color: #FFFFFF; }
.btn.cta:hover       { background: #0288C4; }

.btn.danger    { background: var(--pv-danger-soft); color: var(--pv-danger); }
.btn.danger:hover { background: #FFE0DB; }

.btn.ghost     { background: transparent; color: var(--pv-text-muted); border-color: transparent; }
.btn.ghost:hover { background: var(--pv-elevated); }

.btn.pill      { background: var(--pv-primary-soft); color: var(--pv-primary); border-radius: var(--pv-r-pill); }
.btn.pill:hover { background: #FFE9CC; }

/* ---- badge وضعیت ---- */
.badge {
  display: inline-flex;
  align-items: center;
  padding-block: 4px;
  padding-inline: var(--pv-s3);
  border-radius: var(--pv-r-pill);
  font-size: 12px;
  font-weight: 500;
}

.badge.draft     { background: var(--status-draft-bg);     color: var(--status-draft-text); }
.badge.review    { background: var(--status-review-bg);    color: var(--status-review-text); }
.badge.approved  { background: var(--status-approved-bg);  color: var(--status-approved-text); }
.badge.published { background: var(--status-published-bg); color: var(--status-published-text); }
.badge.inactive  { background: var(--status-inactive-bg);  color: var(--status-inactive-text); }
.badge.archived  { background: var(--status-archived-bg);  color: var(--status-archived-text); }

/* ---- رنگ‌های معنایی ---- */
.semantic-success { background: var(--success-bg); color: var(--success-text); }
.semantic-warning { background: var(--warning-bg); color: var(--warning-text); }
.semantic-error   { background: var(--error-bg);   color: var(--error-text); }
.semantic-info    { background: var(--info-bg);    color: var(--info-text); }

/* ---- پنل و فرم ---- */
.panel {
  background: var(--pv-surface);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-card);
  padding: var(--pv-s4);
  box-shadow: var(--pv-e0);
}

.label {
  display: block;
  margin-block-end: var(--pv-s1);
  font-size: 13px;
  font-weight: 500;
  color: var(--pv-text-muted);
}

.input, .select, .textarea {
  width: 100%;
  min-height: 36px;
  padding-block: var(--pv-s2);
  padding-inline: var(--pv-s3);
  border: 1px solid var(--pv-border);
  border-radius: var(--pv-r-btn);
  background: var(--pv-surface);
  color: var(--pv-text);
  font-family: var(--font-ui);
  font-size: 14px;
}

.input::placeholder, .textarea::placeholder {
  color: var(--pv-text-faint);
}

.input:focus, .select:focus, .textarea:focus {
  outline: none;
  border-color: var(--pv-accent);
  box-shadow: 0 0 0 3px var(--pv-accent-soft);
}

@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; }
}