/* =========================================================
   کافه وال — توکن‌های طراحی (Design Tokens)
   هویت بصری: لایت، گرم و پرمیوم — کرم قهوه‌ای با لهجه‌ی کاراملی
   ========================================================= */

:root {
  /* ---- پس‌زمینه و سطوح ---- */
  --bg-0: #F5EFE7;            /* پس‌زمینه‌ی صفحه (کرم گرم) */
  --bg-1: #FFFFFF;            /* سطح کارت */
  --bg-2: #FBF7F1;            /* سطح ملایم */
  --bg-3: #F1E9DF;            /* سطح فشرده */
  --cream: #FAF5EE;

  /* ---- خطوط و مرزها ---- */
  --line: #EAE0D4;
  --line-strong: #DCCFBF;
  --line-soft: #F2EAE0;

  /* ---- سطوح «شیشه‌ای» (نگه‌داشته‌شده برای سازگاری کلاس‌ها) ---- */
  --glass-bg: rgba(255, 255, 255, 0.72);
  --glass-bg-strong: rgba(255, 255, 255, 0.9);
  --glass-bg-soft: rgba(255, 255, 255, 0.55);
  --glass-border: var(--line);
  --glass-border-strong: var(--line-strong);
  --glass-blur: 14px;

  /* ---- متن ---- */
  --text-1: #2C211A;         /* قهوه‌ای اسپرسویی تیره */
  --text-2: #6E5C4C;         /* قهوه‌ای ملایم */
  --text-3: #9D8B79;         /* قهوه‌ای روشن / راهنما */
  --on-accent: #FFFFFF;

  /* ---- رنگ تأکیدی برند (پیش‌فرض: کاراملی) ---- */
  --accent: #B97A3D;
  --accent-2: #D09A5E;
  --accent-deep: #8E5A26;
  --accent-soft: rgba(185, 122, 61, 0.12);
  --accent-soft-2: rgba(185, 122, 61, 0.18);
  --accent-border: rgba(185, 122, 61, 0.34);
  --accent-glow: rgba(142, 90, 38, 0.26);

  /* ---- رنگ‌های معنایی ---- */
  --success: #2E9C67;
  --success-soft: rgba(46, 156, 103, 0.13);
  --success-border: rgba(46, 156, 103, 0.3);
  --warning: #C4881B;
  --warning-soft: rgba(196, 136, 27, 0.14);
  --warning-border: rgba(196, 136, 27, 0.32);
  --danger: #CF5240;
  --danger-soft: rgba(207, 82, 64, 0.12);
  --danger-border: rgba(207, 82, 64, 0.3);
  --info: #4A7FB5;
  --info-soft: rgba(74, 127, 181, 0.13);
  --info-border: rgba(74, 127, 181, 0.3);

  /* ---- سایه‌ها (نرم و گرم) ---- */
  --shadow-1: 0 1px 2px rgba(63, 44, 29, 0.05), 0 6px 18px rgba(63, 44, 29, 0.06);
  --shadow-2: 0 6px 16px rgba(63, 44, 29, 0.08), 0 20px 44px rgba(63, 44, 29, 0.10);
  --shadow-accent: 0 6px 18px rgba(142, 90, 38, 0.28);
  --inset-hairline: inset 0 1px 0 rgba(255, 255, 255, 0.75);

  /* ---- شعاع‌ها ---- */
  --r-sm: 12px;
  --r-md: 16px;
  --r-lg: 20px;
  --r-xl: 26px;
  --r-2xl: 34px;
  --r-pill: 999px;

  /* ---- فاصله‌گذاری ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-8: 32px;

  /* ---- تایپوگرافی ---- */
  --font: "Vazirmatn", "Vazir", "IRANSansX", "IRANSans", "Sahel",
    "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif;
  --fs-xs: 11px;
  --fs-sm: 13px;
  --fs-md: 14px;
  --fs-base: 15px;
  --fs-lg: 17px;
  --fs-xl: 20px;
  --fs-2xl: 24px;

  /* ---- حرکت ---- */
  --ease: cubic-bezier(0.22, 0.8, 0.3, 1);
  --t-fast: 150ms;
  --t-med: 240ms;

  /* ---- لایه‌بندی ---- */
  --topbar-h: 68px;
  --sidebar-w: 250px;
  --bottomnav-h: 66px;
  --pad-main: 26px;
  --z-topbar: 40;
  --z-sidebar: 30;
  --z-bottomnav: 50;
  --z-cartbar: 55;
  --z-cartdrawer: 60;
  --z-modal: 80;
  --z-toast: 95;

  color-scheme: light;
}

/* ---- گزینه‌های رنگ تأکیدی (تنظیمات ظاهری) ---- */
[data-accent="mocha"] {
  --accent: #8B5A3C;
  --accent-2: #A9784F;
  --accent-deep: #6B422A;
  --accent-soft: rgba(139, 90, 60, 0.12);
  --accent-soft-2: rgba(139, 90, 60, 0.2);
  --accent-border: rgba(139, 90, 60, 0.34);
  --accent-glow: rgba(107, 66, 42, 0.26);
}

[data-accent="sage"] {
  --accent: #6E8A5E;
  --accent-2: #86A276;
  --accent-deep: #516B44;
  --accent-soft: rgba(110, 138, 94, 0.13);
  --accent-soft-2: rgba(110, 138, 94, 0.2);
  --accent-border: rgba(110, 138, 94, 0.34);
  --accent-glow: rgba(81, 107, 68, 0.24);
}

[data-accent="rose"] {
  --accent: #B4636B;
  --accent-2: #C98690;
  --accent-deep: #8E4550;
  --accent-soft: rgba(180, 99, 107, 0.12);
  --accent-soft-2: rgba(180, 99, 107, 0.2);
  --accent-border: rgba(180, 99, 107, 0.34);
  --accent-glow: rgba(142, 69, 80, 0.24);
}

/* ---- شدت افکت شیشه (تنظیمات ظاهری) ---- */
[data-glass="soft"]   { --glass-blur: 8px;  --glass-bg: rgba(255, 255, 255, 0.82); --glass-bg-soft: rgba(255, 255, 255, 0.66); }
[data-glass="medium"] { --glass-blur: 14px; --glass-bg: rgba(255, 255, 255, 0.72); --glass-bg-soft: rgba(255, 255, 255, 0.55); }
[data-glass="strong"] { --glass-blur: 22px; --glass-bg: rgba(255, 255, 255, 0.6);  --glass-bg-soft: rgba(255, 255, 255, 0.42); }

/* ---- گرادیان‌های کاشی محصولات بر اساس دسته‌بندی (لایت و گرم) ---- */
.g-coffee { --tile-a: #F3E3D2; --tile-b: #E7CFB4; }
.g-drink  { --tile-a: #E4EDE2; --tile-b: #CFDECA; }
.g-food   { --tile-a: #F6E2D8; --tile-b: #EDCBBA; }
.g-cake   { --tile-a: #F3E1E6; --tile-b: #E7C9D2; }
.g-other  { --tile-a: #E7E9EE; --tile-b: #D3D7E0; }