/* ==========================================================
   هتل منجی مشهد — توکن‌های طراحی (Design Tokens)
   ==========================================================
   این فایل «منبع حقیقت» رنگ، تایپوگرافی و فاصله‌گذاری است و
   باید پیش از style.css بارگذاری شود.

   ساختار دو لایه:
     ۱) لایهٔ پایه  — رنگ خام برند (زرشکی، طلایی، ...)
     ۲) لایهٔ معنایی — نقش رنگ (primary، accent، border، ...)

   در کد همیشه از لایهٔ معنایی استفاده کنید، نه رنگ خام؛ این‌طور
   تغییر بعدی برند فقط در همین فایل انجام می‌شود نه در ده‌ها جا.

   همهٔ ترکیب‌های رنگ با معیار WCAG سنجیده شده‌اند و نسبت کنتراست
   هر کدام جلوی خودش نوشته است.
   ========================================================== */

:root {
  /* ---------- ۱) لایهٔ پایه: رنگ خام برند ---------- */
  --brand-burgundy:       #7a1e2e;
  --brand-burgundy-dark:  #5a1220;
  --brand-burgundy-light: #9c3247;
  --brand-burgundy-50:    #fdf5f6;
  --brand-burgundy-100:   #f9e6e9;

  --brand-gold:           #c9a227;   /* فقط تزئین — متن تیره روی آن */
  --brand-gold-light:     #e0c265;
  --brand-gold-deep:      #8a6d10;   /* CTA — متن سفید روی آن ۴.۹۱ ✓ */
  --brand-gold-50:        #fdfaf0;

  --brand-cream:          #faf7f2;
  --brand-ivory:          #fffdf9;

  /* ---------- ۲) لایهٔ معنایی: نقش رنگ ---------- */

  /* سطوح و پس‌زمینه */
  --color-bg:            var(--brand-cream);
  --color-surface:       var(--brand-ivory);
  --color-surface-alt:   #ffffff;

  /* متن — نسبت کنتراست روی پس‌زمینهٔ کرم */
  --color-fg:            #241b1e;   /* ۱۵.۷۱ ✓ متن اصلی */
  --color-fg-secondary:  #4a3d41;   /* ۹.۶۶  ✓ متن ثانویه */
  --color-fg-muted:      #7a6b70;   /* ۴.۷۲  ✓ کم‌رنگ — کف مجاز */
  --color-fg-on-dark:    #ffffff;

  /* رنگ اصلی برند — هدر، سربرگ، دکمهٔ ثانویه */
  --color-primary:        var(--brand-burgundy);        /* سفید رویش ۱۰.۲۳ ✓ */
  --color-primary-hover:  var(--brand-burgundy-dark);
  --color-primary-light:  var(--brand-burgundy-light);
  --color-primary-50:     var(--brand-burgundy-50);
  --color-primary-100:    var(--brand-burgundy-100);
  --color-on-primary:     #ffffff;

  /* رنگ کنش — فقط برای CTA رزرو و پرداخت */
  --color-accent:         var(--brand-gold-deep);       /* سفید رویش ۴.۹۱ ✓ */
  --color-accent-hover:   #6f570d;
  --color-on-accent:      #ffffff;

  /* طلایی تزئینی — برچسب، آیکون، خط جداکننده
     ⚠ هرگز متن سفید روی این نگذارید (۲.۴۲ ✗) — فقط متن تیره (۶.۹۴ ✓) */
  --color-gold:           var(--brand-gold);
  --color-gold-light:     var(--brand-gold-light);
  --color-on-gold:        var(--color-fg);
  --color-gold-text:      #7a5f0c;   /* طلایی خوانا برای متن روی کرم ۵.۶۶ ✓ */

  /* خطوط و مرزها */
  --color-border:         #e8e0dc;
  --color-border-light:   #f2ece8;
  --color-border-strong:  #d6c9c3;

  /* حالت‌ها */
  --color-success:        #166b45;   /* سفید رویش ۶.۵۲ ✓ */
  --color-success-bg:     #e8f5ee;
  --color-success-fg:     #0f4d31;

  --color-warning:        #a86a00;
  --color-warning-bg:     #fdf3e2;
  --color-warning-fg:     #7a4d00;

  --color-destructive:    #b3261e;   /* روی پس‌زمینه‌اش ۵.۷۲ ✓ */
  --color-destructive-bg: #fdecea;
  --color-on-destructive: #ffffff;

  --color-info:           var(--color-primary);
  --color-info-bg:        var(--brand-burgundy-50);

  /* حلقهٔ فوکوس — برای دسترسی‌پذیری کیبورد */
  --color-ring:           var(--color-primary);
  --focus-ring:           0 0 0 3px rgba(122, 30, 46, .25);
  --focus-ring-accent:    0 0 0 3px rgba(138, 109, 16, .3);

  /* ---------- ۳) تایپوگرافی ---------- */
  --font-body: 'Vazirmatn', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif;
  --font-head: var(--font-body);

  /* وزن‌ها — مطابق فایل‌های موجود در assets/fonts */
  --fw-regular:  400;
  --fw-medium:   500;
  --fw-semibold: 600;
  --fw-bold:     700;
  --fw-black:    900;

  /* مقیاس اندازه — پایه ۱۶px، نسبت ~۱.۲۵ */
  --text-xs:   0.75rem;    /* ۱۲px — فقط برچسب، نه متن بدنه */
  --text-sm:   0.875rem;   /* ۱۴px */
  --text-base: 1rem;       /* ۱۶px — حداقل متن بدنه */
  --text-lg:   1.125rem;   /* ۱۸px */
  --text-xl:   1.375rem;   /* ۲۲px */
  --text-2xl:  1.75rem;    /* ۲۸px */
  --text-3xl:  2.25rem;    /* ۳۶px */
  --text-4xl:  3rem;       /* ۴۸px */

  --leading-tight:  1.25;
  --leading-snug:   1.45;
  --leading-normal: 1.7;   /* متن فارسی به فضای بیشتری نیاز دارد */
  --leading-loose:  2;

  /* ---------- ۴) فاصله‌گذاری — پایهٔ ۴px ---------- */
  --space-1:  0.25rem;   /* ۴  */
  --space-2:  0.5rem;    /* ۸  */
  --space-3:  0.75rem;   /* ۱۲ */
  --space-4:  1rem;      /* ۱۶ */
  --space-5:  1.5rem;    /* ۲۴ */
  --space-6:  2rem;      /* ۳۲ */
  --space-7:  3rem;      /* ۴۸ */
  --space-8:  4rem;      /* ۶۴ */
  --space-9:  6rem;      /* ۹۶ */

  /* ---------- ۵) شعاع گوشه ---------- */
  --radius-sm:   8px;
  --radius:      12px;
  --radius-lg:   18px;
  --radius-xl:   26px;
  --radius-full: 999px;

  /* ---------- ۶) سایه ---------- */
  --shadow-sm: 0 1px 2px rgba(36, 27, 30, .06), 0 1px 3px rgba(36, 27, 30, .05);
  --shadow:    0 4px 12px rgba(36, 27, 30, .08), 0 2px 4px rgba(36, 27, 30, .04);
  --shadow-lg: 0 12px 32px rgba(36, 27, 30, .12), 0 4px 8px rgba(36, 27, 30, .05);
  --shadow-xl: 0 24px 56px rgba(36, 27, 30, .16);

  /* ---------- ۷) حرکت ---------- */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-out:    cubic-bezier(0, 0, .2, 1);
  --duration-fast:   150ms;
  --duration:        220ms;
  --duration-slow:   320ms;

  /* ---------- ۸) اندازهٔ لمسی و چیدمان ---------- */
  --touch-min: 44px;      /* حداقل ناحیهٔ لمسی طبق WCAG */
  --header-h:  76px;
  --container: 1240px;

  /* ==========================================================
     سازگاری با کد قدیمی
     ----------------------------------------------------------
     نام‌های قبلی حذف نشده‌اند تا هیچ بخشی از سایت نشکند؛ فقط به
     توکن‌های معنایی نگاشت می‌شوند. کدهای جدید باید از نام‌های
     معنایی بالا استفاده کنند.
     ========================================================== */
  --burgundy:       var(--color-primary);
  --burgundy-dark:  var(--color-primary-hover);
  --burgundy-light: var(--color-primary-light);
  --burgundy-50:    var(--color-primary-50);
  --burgundy-100:   var(--color-primary-100);

  --gold:       var(--color-gold);
  --gold-light: var(--color-gold-light);
  --gold-dark:  var(--color-gold-text);   /* اصلاح: نسخهٔ خوانا */
  --gold-50:    var(--brand-gold-50);

  --cream: var(--color-bg);
  --ivory: var(--color-surface);

  --ink:   var(--color-fg);
  --ink-2: var(--color-fg-secondary);
  --ink-3: var(--color-fg-muted);
  /* ink-4 قبلاً کنتراست ۲.۵۳ داشت و ناخوانا بود؛ به کف مجاز رسانده شد */
  --ink-4: var(--color-fg-muted);

  --line:   var(--color-border);
  --line-2: var(--color-border-light);

  --ok:     var(--color-success);
  --ok-bg:  var(--color-success-bg);
  --warn:   var(--color-warning);
  --warn-bg: var(--color-warning-bg);
  --bad:    var(--color-destructive);
  --bad-bg: var(--color-destructive-bg);

  --r-sm: var(--radius-sm);
  --r:    var(--radius);
  --r-lg: var(--radius-lg);
  --r-xl: var(--radius-xl);
}

/* ==========================================================
   دسترسی‌پذیری پایه
   ========================================================== */

/* فوکوس کیبورد همیشه دیده شود — هرگز outline را حذف نکنید */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--color-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* احترام به تنظیم «کاهش حرکت» سیستم کاربر */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}