/* ==========================================================================
   Shahin Atam — Design Tokens (CSS Variables)

   منطق رنگ‌بندی (خیلی مهم — همیشه رعایت بشه):
   ۱) سفید  → ۸۵٪ سطح صفحه (پس‌زمینه اصلی، کارت‌ها)
   ۲) طلایی → ۱۰٪ فقط جاهای تاکیدی (آیکون فعال، خط زیر عنوان، بردر hover، لوگو)
   ۳) مشکی  → ۵٪ فقط برای وزن‌دهی (متن اصلی تیره، دکمه اصلی، فوتر، لوگو تایپ)
   هرگز طلایی یا مشکی به‌عنوان بک‌گراند بزرگ استفاده نشه.
   ========================================================================== */

:root {
  /* ---- رنگ‌ها ---- */
  --color-bg: #ffffff;
  --color-bg-soft: #faf9f7;        /* سفید کمی گرم برای بخش‌های متناوب */
  --color-surface: #ffffff;         /* پس‌زمینه کارت‌ها */

  --color-text: #1a1a1a;
  --color-text-muted: #6b6b6b;
  --color-text-inverse: #ffffff;

  --color-gold: #c9a24b;            /* طلایی اصلی — فقط لمس‌های کوچیک */
  --color-gold-soft: #e8dcc0;       /* طلایی خیلی روشن — بردر/بک‌گراند خیلی محو */
  --color-gold-deep: #a8842f;       /* طلایی تیره‌تر — حالت hover دکمه‌ها */

  --color-black: #141414;           /* مشکی لایه سوم — خیلی محدود: دکمه‌ها/متن مهم/فوتر */
  --color-black-soft: #2b2b2b;      /* حالت hover روی مشکی */

  --color-border: #ececec;
  --color-overlay: rgba(0, 0, 0, 0.45); /* روی عکس‌های گالری/هیرو */

  --color-success: #2e7d32;         /* برای وضعیت‌های موجود بودن غذا و... */

  /* ---- تایپوگرافی ---- */
  --font-fa: 'Vazir', Tahoma, sans-serif;
  --font-logo: 'Poppins', 'Segoe UI', sans-serif; /* برای لوگوی لاتین Shahin Atam */

  --fs-xs: 0.75rem;
  --fs-sm: 0.875rem;
  --fs-base: 1rem;
  --fs-md: 1.125rem;
  --fs-lg: 1.5rem;
  --fs-xl: 2rem;
  --fs-2xl: 2.75rem;
  --fs-3xl: 3.5rem;

  --fw-light: 300;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-bold: 700;

  --lh-tight: 1.2;
  --lh-normal: 1.6;
  --lh-loose: 1.9;

  /* ---- فاصله‌گذاری (Spacing Scale) ---- */
  --space-xs: 0.5rem;
  --space-sm: 1rem;
  --space-md: 1.5rem;
  --space-lg: 2.5rem;
  --space-xl: 4rem;
  --space-2xl: 6rem;

  /* ---- شعاع گوشه‌ها و سایه ---- */
  --radius-sm: 6px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-full: 999px;

  --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.06);
  --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.08);
  --shadow-gold: 0 4px 16px rgba(201, 162, 75, 0.25);

  /* ---- انیمیشن ---- */
  --ease-smooth: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --duration-fast: 0.2s;
  --duration-base: 0.4s;
  --duration-slow: 0.7s;

  /* ---- کانتینر ---- */
  --container-max: 1200px;
  --container-padding: 1.25rem;

  /* ---- لایه‌ها (z-index) ---- */
  --z-header: 100;
  --z-modal: 200;
  --z-overlay: 150;
}