/**
 * ════════════════════════════════════════════════════════════
 *  HyperMarket M3 — Design Tokens
 *  ترکیب Material You (Android 16) + iOS 26
 *  فاز ۱ — پایه سیستم طراحی
 * ════════════════════════════════════════════════════════════
 *
 *  ساختار:
 *  1. Color — رنگ‌ها (M3 Tonal Palette)
 *  2. Elevation — سایه و عمق (M3)
 *  3. Shape — شکل و گوشه‌ها (M3)
 *  4. Spacing — فاصله‌گذاری (iOS 26)
 *  5. Typography — تایپوگرافی (M3 Type Scale)
 *  6. Motion — انیمیشن (M3 Easing)
 *  7. Glass — شیشه‌ای (iOS 26 Liquid Glass)
 *  8. Z-Index — لایه‌بندی
 *  9. Breakpoints — نقاط شکست ریسپانسیو
 * ════════════════════════════════════════════════════════════
 */


/* ════════════════════════════════════════
   1. COLOR — M3 Tonal Color System
   ════════════════════════════════════════

   منطق M3:
   - Primary     = رنگ اصلی برند (دکمه‌ها، لینک‌های فعال)
   - Secondary   = رنگ ثانویه (تگ‌ها، تأکید)
   - Tertiary    = رنگ سوم (تنوع و تعادل)
   - Surface     = پس‌زمینه کارت‌ها و المان‌ها
   - Background  = پس‌زمینه کل صفحه
   - Error       = خطا و هشدار
   - Outline     = کادرها و خطوط جداکننده
*/

:root {

  /* ─── Primary (آبی برند) ─── */
  --md-primary-0:   #000000;
  --md-primary-10:  #001849;
  --md-primary-20:  #002D85;
  --md-primary-30:  #0042BF;
  --md-primary-40:  #1B5EF3;  /* Primary — Light Mode */
  --md-primary-50:  #4D7EFF;
  --md-primary-60:  #7B9FFF;
  --md-primary-70:  #A5BEFF;
  --md-primary-80:  #C5D6FF;  /* Primary — Dark Mode */
  --md-primary-90:  #DCE8FF;
  --md-primary-95:  #EEF3FF;
  --md-primary-99:  #FAFBFF;
  --md-primary-100: #FFFFFF;

  /* ─── Secondary (بنفش ثانویه) ─── */
  --md-secondary-40:  #6B53AE;
  --md-secondary-80:  #CFBEFF;
  --md-secondary-90:  #E9DEFF;

  /* ─── Tertiary (سبز سوم) ─── */
  --md-tertiary-40:   #006C50;
  --md-tertiary-80:   #6DDBB3;
  --md-tertiary-90:   #89F8CC;

  /* ─── Neutral ─── */
  --md-neutral-0:   #000000;
  --md-neutral-4:   #0B0D11;
  --md-neutral-6:   #111318;
  --md-neutral-10:  #1A1C1F;
  --md-neutral-12:  #1F2024;
  --md-neutral-17:  #292A2D;
  --md-neutral-20:  #2F3033;
  --md-neutral-22:  #343539;
  --md-neutral-24:  #38393D;
  --md-neutral-30:  #46474A;
  --md-neutral-40:  #5E5F62;
  --md-neutral-50:  #777779;
  --md-neutral-60:  #919093;
  --md-neutral-70:  #ACACAD;
  --md-neutral-80:  #C7C6C9;
  --md-neutral-87:  #D9D8DB;
  --md-neutral-90:  #E3E2E5;
  --md-neutral-92:  #E9E8EB;
  --md-neutral-94:  #EEF0F3;
  --md-neutral-95:  #F1F0F4;
  --md-neutral-96:  #F3F2F6;
  --md-neutral-98:  #F9F8FC;
  --md-neutral-99:  #FEFBFF;
  --md-neutral-100: #FFFFFF;

  /* ─── Neutral Variant ─── */
  --md-neutral-variant-30: #44464F;
  --md-neutral-variant-50: #74777F;
  --md-neutral-variant-60: #8E9099;
  --md-neutral-variant-80: #C4C6D0;
  --md-neutral-variant-90: #E1E2EC;

  /* ─── Error ─── */
  --md-error-40:  #BA1A1A;
  --md-error-80:  #FFB4AB;
  --md-error-90:  #FFDAD6;

  /* ─── Success (اختصاصی، خارج از M3 اصلی) ─── */
  --md-success-40: #1A7A4A;
  --md-success-80: #78DCAA;
  --md-success-90: #AFFFDA;

  /* ─── Warning ─── */
  --md-warning-40: #7D5700;
  --md-warning-80: #F9BC42;
  --md-warning-90: #FFDEA3;


  /* ══════════════════════════════════════
     LIGHT MODE — متغیرهای معنایی
     اینا رو توی کدت مستقیم استفاده کن
     ══════════════════════════════════════ */

  --md-sys-color-primary:              var(--md-primary-40);
  --md-sys-color-on-primary:           var(--md-primary-100);
  --md-sys-color-primary-container:    var(--md-primary-90);
  --md-sys-color-on-primary-container: var(--md-primary-10);

  --md-sys-color-secondary:              var(--md-secondary-40);
  --md-sys-color-on-secondary:           #FFFFFF;
  --md-sys-color-secondary-container:    var(--md-secondary-90);
  --md-sys-color-on-secondary-container: #210060;

  --md-sys-color-tertiary:              var(--md-tertiary-40);
  --md-sys-color-on-tertiary:           #FFFFFF;
  --md-sys-color-tertiary-container:    var(--md-tertiary-90);
  --md-sys-color-on-tertiary-container: #00201A;

  --md-sys-color-error:              var(--md-error-40);
  --md-sys-color-on-error:           #FFFFFF;
  --md-sys-color-error-container:    var(--md-error-90);
  --md-sys-color-on-error-container: #410002;

  --md-sys-color-success:              var(--md-success-40);
  --md-sys-color-success-container:    var(--md-success-90);

  --md-sys-color-warning:              var(--md-warning-40);
  --md-sys-color-warning-container:    var(--md-warning-90);

  --md-sys-color-background:           var(--md-neutral-98);
  --md-sys-color-on-background:        var(--md-neutral-10);

  --md-sys-color-surface:              var(--md-neutral-98);
  --md-sys-color-on-surface:           var(--md-neutral-10);
  --md-sys-color-surface-variant:      var(--md-neutral-variant-90);
  --md-sys-color-on-surface-variant:   var(--md-neutral-variant-30);

  /* Surface Tones — لایه‌های مختلف عمق */
  --md-sys-color-surface-1: color-mix(in srgb, var(--md-sys-color-primary) 5%, var(--md-sys-color-surface));
  --md-sys-color-surface-2: color-mix(in srgb, var(--md-sys-color-primary) 8%, var(--md-sys-color-surface));
  --md-sys-color-surface-3: color-mix(in srgb, var(--md-sys-color-primary) 11%, var(--md-sys-color-surface));
  --md-sys-color-surface-4: color-mix(in srgb, var(--md-sys-color-primary) 12%, var(--md-sys-color-surface));
  --md-sys-color-surface-5: color-mix(in srgb, var(--md-sys-color-primary) 14%, var(--md-sys-color-surface));

  --md-sys-color-outline:        var(--md-neutral-variant-50);
  --md-sys-color-outline-variant: var(--md-neutral-variant-80);

  --md-sys-color-inverse-surface:    var(--md-neutral-20);
  --md-sys-color-inverse-on-surface: var(--md-neutral-95);
  --md-sys-color-inverse-primary:    var(--md-primary-80);

  --md-sys-color-scrim:   rgba(0, 0, 0, 0.32);
  --md-sys-color-shadow:  rgba(0, 0, 0, 1);
}


/* ════════════════════════════════════════
   DARK MODE — تم تاریک
   ════════════════════════════════════════ */

/* dark mode disabled for this theme */
}

/* تم تاریک دستی (با کلاس) */
[data-theme="dark"] {
  --md-sys-color-primary:              var(--md-primary-80);
  --md-sys-color-on-primary:           var(--md-primary-20);
  --md-sys-color-primary-container:    var(--md-primary-30);
  --md-sys-color-on-primary-container: var(--md-primary-90);
  --md-sys-color-background:           var(--md-neutral-6);
  --md-sys-color-on-background:        var(--md-neutral-90);
  --md-sys-color-surface:              var(--md-neutral-6);
  --md-sys-color-on-surface:           var(--md-neutral-90);
  --md-sys-color-surface-variant:      var(--md-neutral-variant-30);
  --md-sys-color-on-surface-variant:   var(--md-neutral-variant-80);
  --md-sys-color-outline:              var(--md-neutral-variant-60);
  --md-sys-color-outline-variant:      var(--md-neutral-variant-30);
  --md-sys-color-inverse-surface:      var(--md-neutral-90);
  --md-sys-color-inverse-on-surface:   var(--md-neutral-20);
  --md-sys-color-inverse-primary:      var(--md-primary-40);
}

[data-theme="light"] {
  --md-sys-color-primary:              var(--md-primary-40);
  --md-sys-color-on-primary:           var(--md-primary-100);
  --md-sys-color-primary-container:    var(--md-primary-90);
  --md-sys-color-on-primary-container: var(--md-primary-10);
  --md-sys-color-background:           var(--md-neutral-98);
  --md-sys-color-on-background:        var(--md-neutral-10);
  --md-sys-color-surface:              var(--md-neutral-98);
  --md-sys-color-on-surface:           var(--md-neutral-10);
  --md-sys-color-surface-variant:      var(--md-neutral-variant-90);
  --md-sys-color-on-surface-variant:   var(--md-neutral-variant-30);
  --md-sys-color-outline:              var(--md-neutral-variant-50);
  --md-sys-color-outline-variant:      var(--md-neutral-variant-80);
  --md-sys-color-inverse-surface:      var(--md-neutral-20);
  --md-sys-color-inverse-on-surface:   var(--md-neutral-95);
  --md-sys-color-inverse-primary:      var(--md-primary-80);
}


/* ════════════════════════════════════════
   2. ELEVATION — M3 Shadow Tokens
   ════════════════════════════════════════

   Level 0 = بدون سایه (Flat)
   Level 1 = کارت‌های پایه
   Level 2 = دراور، منوی ناوبری
   Level 3 = FAB، دیالوگ
   Level 4 = App Bar بالا هنگام اسکرول
   Level 5 = SnackBar، Tooltip
*/

:root {
  --md-elevation-0: none;

  --md-elevation-1:
    0px 1px 2px rgba(0, 0, 0, 0.3),
    0px 1px 3px 1px rgba(0, 0, 0, 0.15);

  --md-elevation-2:
    0px 1px 2px rgba(0, 0, 0, 0.3),
    0px 2px 6px 2px rgba(0, 0, 0, 0.15);

  --md-elevation-3:
    0px 4px 8px 3px rgba(0, 0, 0, 0.15),
    0px 1px 3px rgba(0, 0, 0, 0.3);

  --md-elevation-4:
    0px 6px 10px 4px rgba(0, 0, 0, 0.15),
    0px 2px 3px rgba(0, 0, 0, 0.3);

  --md-elevation-5:
    0px 8px 12px 6px rgba(0, 0, 0, 0.15),
    0px 4px 4px rgba(0, 0, 0, 0.3);

  /* Elevation در Dark Mode (کمی کمتر) */
  --md-elevation-dark-1:
    0px 1px 2px rgba(0, 0, 0, 0.5),
    0px 1px 3px 1px rgba(0, 0, 0, 0.25);

  --md-elevation-dark-2:
    0px 1px 2px rgba(0, 0, 0, 0.5),
    0px 2px 6px 2px rgba(0, 0, 0, 0.25);

  --md-elevation-dark-3:
    0px 4px 8px 3px rgba(0, 0, 0, 0.25),
    0px 1px 3px rgba(0, 0, 0, 0.5);
}

@media (prefers-color-scheme: dark) {
  :root {
    --md-elevation-1: var(--md-elevation-dark-1);
    --md-elevation-2: var(--md-elevation-dark-2);
    --md-elevation-3: var(--md-elevation-dark-3);
  }
}


/* ════════════════════════════════════════
   3. SHAPE — M3 Corner Radius Tokens
   ════════════════════════════════════════

   None         = 0   (دکمه‌های تیز)
   Extra Small  = 4px (چیپ‌ها، تگ‌ها)
   Small        = 8px (کارت‌های کوچک، Input)
   Medium       = 12px (کارت‌های معمولی)
   Large        = 16px (دیالوگ، Sheet)
   Extra Large  = 28px (کارت‌های بزرگ، FAB)
   Full         = 9999px (پیل، آواتار)
*/

:root {
  --md-shape-none:         0px;
  --md-shape-extra-small:  4px;
  --md-shape-small:        8px;
  --md-shape-medium:       12px;
  --md-shape-large:        16px;
  --md-shape-extra-large:  28px;
  --md-shape-full:         9999px;

  /* iOS 26 — گوشه‌های بزرگ‌تر و نرم‌تر */
  --ios-shape-card:        20px;
  --ios-shape-sheet:       40px;
  --ios-shape-island:      44px;
  --ios-shape-widget:      26px;
}


/* ════════════════════════════════════════
   4. SPACING — iOS 26 Spacing Scale
   ════════════════════════════════════════

   بر اساس ۸px grid با زیرتقسیم ۴px
*/

:root {
  --space-1:   4px;   /* ریز — فاصله آیکون از لیبل */
  --space-2:   8px;   /* کوچک — پدینگ داخلی چیپ */
  --space-3:   12px;  /* متوسط‌کوچک */
  --space-4:   16px;  /* متوسط — پدینگ کارت */
  --space-5:   20px;  /* متوسط‌بزرگ */
  --space-6:   24px;  /* بزرگ — فاصله بین بخش‌ها */
  --space-8:   32px;  /* خیلی بزرگ */
  --space-10:  40px;  /* هدر */
  --space-12:  48px;  /* ناوبری */
  --space-14:  56px;  /* App Bar */
  --space-16:  64px;  /* section padding */
  --space-20:  80px;  /* Bottom Nav ارتفاع */
  --space-24:  96px;
  --space-32: 128px;

  /* Safe Area — برای نچ و دینامیک آیلند */
  --safe-top:    env(safe-area-inset-top,    0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left,   0px);
  --safe-right:  env(safe-area-inset-right,  0px);

  /* iOS 26 Content Width */
  --ios-content-width:     390px;  /* iPhone 16 base */
  --ios-content-width-max: 430px;  /* iPhone 16 Plus / Pro Max */
  --ios-sidebar-width:     320px;  /* iPad sidebar */
}


/* ════════════════════════════════════════
   5. TYPOGRAPHY — M3 Type Scale
   ════════════════════════════════════════

   فونت فارسی: Vazirmatn
   فونت لاتین: Plus Jakarta Sans
*/

:root {
  /* ─── Font Families ─── */
  --md-font-fa:       'Vazirmatn', 'Tahoma', sans-serif;
  --md-font-en:       'Plus Jakarta Sans', 'Segoe UI', sans-serif;
  --md-font-mono:     'JetBrains Mono', 'Courier New', monospace;
  --md-font-default:  var(--md-font-fa);

  /* ─── Font Weights ─── */
  --md-weight-light:   300;
  --md-weight-regular: 400;
  --md-weight-medium:  500;
  --md-weight-semibold: 600;
  --md-weight-bold:    700;

  /* ─── M3 Type Scale: Display ─── */
  --md-type-display-large-size:        57px;
  --md-type-display-large-weight:      var(--md-weight-regular);
  --md-type-display-large-line-height: 64px;
  --md-type-display-large-tracking:    -0.25px;

  --md-type-display-medium-size:        45px;
  --md-type-display-medium-weight:      var(--md-weight-regular);
  --md-type-display-medium-line-height: 52px;
  --md-type-display-medium-tracking:    0px;

  --md-type-display-small-size:        36px;
  --md-type-display-small-weight:      var(--md-weight-regular);
  --md-type-display-small-line-height: 44px;
  --md-type-display-small-tracking:    0px;

  /* ─── Headline ─── */
  --md-type-headline-large-size:        32px;
  --md-type-headline-large-weight:      var(--md-weight-regular);
  --md-type-headline-large-line-height: 40px;

  --md-type-headline-medium-size:        28px;
  --md-type-headline-medium-weight:      var(--md-weight-regular);
  --md-type-headline-medium-line-height: 36px;

  --md-type-headline-small-size:        24px;
  --md-type-headline-small-weight:      var(--md-weight-regular);
  --md-type-headline-small-line-height: 32px;

  /* ─── Title ─── */
  --md-type-title-large-size:        22px;
  --md-type-title-large-weight:      var(--md-weight-regular);
  --md-type-title-large-line-height: 28px;

  --md-type-title-medium-size:        16px;
  --md-type-title-medium-weight:      var(--md-weight-medium);
  --md-type-title-medium-line-height: 24px;
  --md-type-title-medium-tracking:    0.15px;

  --md-type-title-small-size:        14px;
  --md-type-title-small-weight:      var(--md-weight-medium);
  --md-type-title-small-line-height: 20px;
  --md-type-title-small-tracking:    0.1px;

  /* ─── Body ─── */
  --md-type-body-large-size:        16px;
  --md-type-body-large-weight:      var(--md-weight-regular);
  --md-type-body-large-line-height: 24px;
  --md-type-body-large-tracking:    0.5px;

  --md-type-body-medium-size:        14px;
  --md-type-body-medium-weight:      var(--md-weight-regular);
  --md-type-body-medium-line-height: 20px;
  --md-type-body-medium-tracking:    0.25px;

  --md-type-body-small-size:        12px;
  --md-type-body-small-weight:      var(--md-weight-regular);
  --md-type-body-small-line-height: 16px;
  --md-type-body-small-tracking:    0.4px;

  /* ─── Label ─── */
  --md-type-label-large-size:        14px;
  --md-type-label-large-weight:      var(--md-weight-medium);
  --md-type-label-large-line-height: 20px;
  --md-type-label-large-tracking:    0.1px;

  --md-type-label-medium-size:        12px;
  --md-type-label-medium-weight:      var(--md-weight-medium);
  --md-type-label-medium-line-height: 16px;
  --md-type-label-medium-tracking:    0.5px;

  --md-type-label-small-size:        11px;
  --md-type-label-small-weight:      var(--md-weight-medium);
  --md-type-label-small-line-height: 16px;
  --md-type-label-small-tracking:    0.5px;
}


/* ════════════════════════════════════════
   6. MOTION — M3 Easing & Duration
   ════════════════════════════════════════

   M3 از Emphasized Easing به جای linear استفاده می‌کنه
   iOS از spring-based animation
*/

:root {
  /* ─── M3 Easing Curves ─── */
  --md-motion-easing-standard:          cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-standard-decel:    cubic-bezier(0, 0, 0, 1);
  --md-motion-easing-standard-accel:    cubic-bezier(0.3, 0, 1, 1);
  --md-motion-easing-emphasized:        cubic-bezier(0.2, 0, 0, 1);
  --md-motion-easing-emphasized-decel:  cubic-bezier(0.05, 0.7, 0.1, 1);
  --md-motion-easing-emphasized-accel:  cubic-bezier(0.3, 0, 0.8, 0.15);
  --md-motion-easing-legacy:            cubic-bezier(0.4, 0, 0.2, 1);
  --md-motion-easing-legacy-decel:      cubic-bezier(0, 0, 0.2, 1);
  --md-motion-easing-legacy-accel:      cubic-bezier(0.4, 0, 1, 1);
  --md-motion-easing-linear:            cubic-bezier(0, 0, 1, 1);

  /* ─── M3 Duration ─── */
  --md-motion-duration-short1:  50ms;
  --md-motion-duration-short2:  100ms;
  --md-motion-duration-short3:  150ms;
  --md-motion-duration-short4:  200ms;
  --md-motion-duration-medium1: 250ms;
  --md-motion-duration-medium2: 300ms;
  --md-motion-duration-medium3: 350ms;
  --md-motion-duration-medium4: 400ms;
  --md-motion-duration-long1:   450ms;
  --md-motion-duration-long2:   500ms;
  --md-motion-duration-long3:   550ms;
  --md-motion-duration-long4:   600ms;

  /* ─── Shorthand (پرکاربردها) ─── */
  --transition-fast:   var(--md-motion-duration-short4)  var(--md-motion-easing-standard);
  --transition-normal: var(--md-motion-duration-medium2) var(--md-motion-easing-standard);
  --transition-slow:   var(--md-motion-duration-medium4) var(--md-motion-easing-emphasized);

  /* iOS Spring (شبیه‌سازی با cubic-bezier) */
  --ios-spring-fast:   cubic-bezier(0.34, 1.56, 0.64, 1);
  --ios-spring-normal: cubic-bezier(0.25, 1.25, 0.5, 1);
}


/* ════════════════════════════════════════
   7. GLASS — iOS 26 Liquid Glass
   ════════════════════════════════════════ */

:root {
  /* ─── Blur Levels ─── */
  --ios-blur-xs:  blur(4px);
  --ios-blur-sm:  blur(8px);
  --ios-blur-md:  blur(20px);
  --ios-blur-lg:  blur(40px);
  --ios-blur-xl:  blur(80px);

  /* ─── Glass Backgrounds (Light) ─── */
  --ios-glass-ultra-thin:   rgba(255, 255, 255, 0.45);
  --ios-glass-thin:         rgba(255, 255, 255, 0.60);
  --ios-glass-regular:      rgba(255, 255, 255, 0.72);
  --ios-glass-thick:        rgba(255, 255, 255, 0.85);
  --ios-glass-chrome:       rgba(246, 246, 246, 0.92);

  /* ─── Glass Backgrounds (Dark) ─── */
  --ios-glass-dark-ultra-thin: rgba(28, 28, 30, 0.45);
  --ios-glass-dark-thin:       rgba(28, 28, 30, 0.60);
  --ios-glass-dark-regular:    rgba(28, 28, 30, 0.72);
  --ios-glass-dark-thick:      rgba(28, 28, 30, 0.85);

  /* ─── Glass Borders ─── */
  --ios-glass-border-light:  rgba(255, 255, 255, 0.40);
  --ios-glass-border-medium: rgba(255, 255, 255, 0.25);
  --ios-glass-border-dark:   rgba(255, 255, 255, 0.12);

  /* ─── تنظیمات در حال استفاده ─── */
  --glass-bg:     var(--ios-glass-regular);
  --glass-blur:   var(--ios-blur-md);
  --glass-border: var(--ios-glass-border-light);
}

@media (prefers-color-scheme: dark) {
  :root {
    --glass-bg:     var(--ios-glass-dark-regular);
    --glass-border: rgba(255, 255, 255, 0.08);
  }
}


/* ════════════════════════════════════════
   8. Z-INDEX — لایه‌بندی
   ════════════════════════════════════════ */

:root {
  --z-below:        -1;
  --z-base:          0;
  --z-above:         1;
  --z-dropdown:    100;
  --z-sticky:      200;
  --z-fixed:       300;
  --z-overlay:     400;   /* backdrop/scrim */
  --z-modal:       500;   /* dialog, sheet */
  --z-snackbar:    600;   /* snackbar, toast */
  --z-tooltip:     700;
  --z-top:         800;   /* bottom nav, app bar */
  --z-max:         900;   /* loader screen */
}


/* ════════════════════════════════════════
   9. BREAKPOINTS — Responsive Tokens
   ════════════════════════════════════════

   M3 Adaptive Layout:
   Compact  < 600px  → موبایل
   Medium   ≥ 600px  → تبلت کوچک
   Expanded ≥ 840px  → تبلت بزرگ
   Large    ≥ 1200px → دسکتاپ
   XL       ≥ 1600px → دسکتاپ بزرگ
*/

:root {
  --bp-compact:  600px;
  --bp-medium:   840px;
  --bp-expanded: 1200px;
  --bp-large:    1600px;

  /* حداکثر عرض محتوا در هر مرحله */
  --max-width-compact:   600px;
  --max-width-medium:    840px;
  --max-width-expanded:  1200px;
  --max-width-large:     1400px;

  /* Column Count (M3 Adaptive Layout) */
  --columns-compact:  4;
  --columns-medium:   8;
  --columns-expanded: 12;

  /* Column Gutter */
  --gutter-compact:   16px;
  --gutter-medium:    24px;
  --gutter-expanded:  24px;

  /* Column Margin (صفحه) */
  --margin-compact:   16px;
  --margin-medium:    24px;
  --margin-expanded:  24px;
}