/**
 * Monitor Market Design Tokens
 * 
 * Complete design token system extracted from all CSS versions,
 * Elementor templates, HTML UI kits, and section library.
 * 
 * Sources: v3.2, v3.3, v3.5, v4-v15, v6.2, v7, v7.8.0, v8.0.0, Farsi Elementor Themes
 */

/* ===========================================
   COLOR SYSTEM
   =========================================== */

:root {
  /* === Primary Palette === */
  --mm-red: #EF233C;
  --mm-red-2: #D90429;
  --mm-red-3: #BD001F;
  --mm-red-soft: #FFF1F3;
  --mm-red-glow: rgba(239, 35, 60, 0.4);

  --mm-navy: #0B132B;
  --mm-navy-2: #151F3A;
  --mm-navy-deep: #070A11;
  --mm-navy-panel: #10141E;
  --mm-navy-card: #1A1F2B;

  --mm-blue: #00A6FB;
  --mm-blue-2: #0077B6;
  --mm-blue-soft: #ECF8FF;

  --mm-green: #10B981;
  --mm-green-2: #059669;
  --mm-green-soft: #EAFAF4;

  --mm-amber: #FBBF24;
  --mm-amber-soft: #FFF7DF;

  /* === Neutral Palette === */
  --mm-black: #070A11;
  --mm-black-2: #0B101A;
  --mm-graphite: #111827;
  --mm-graphite-2: #1F2937;

  --mm-white: #FFFFFF;
  --mm-surface: #FFFFFF;
  --mm-surface-2: #F8FAFC;
  --mm-surface-dark: #0B101A;
  --mm-surface-dark-2: #111827;

  --mm-ink: #111827;
  --mm-text: #263244;
  --mm-muted: #64748B;
  --mm-faint: #94A3B8;
  --mm-silver: #C0C3C8;
  --mm-gray: #8A8D93;

  --mm-bg: #F4F7FB;
  --mm-bg-2: #EEF3F8;
  --mm-soft: #F1F3F6;
  --mm-soft-2: #EEF2F7;

  --mm-border: rgba(15, 23, 42, 0.10);
  --mm-border-2: rgba(15, 23, 42, 0.16);
  --mm-border-dark: rgba(255, 255, 255, 0.12);
  --mm-border-light: #E5EAF1;
  --mm-border-light-2: #D7DEE8;

  /* === Semantic Colors === */
  --mm-success: #16A34A;
  --mm-success-soft: rgba(22, 163, 74, 0.08);
  --mm-warning: #F59E0B;
  --mm-warning-soft: rgba(245, 158, 11, 0.08);
  --mm-danger: #DC2626;
  --mm-danger-soft: rgba(220, 38, 38, 0.08);
  --mm-info: #2563EB;
  --mm-info-soft: rgba(37, 99, 235, 0.08);

  /* === Badge Colors === */
  --mm-badge-red-bg: rgba(239, 35, 60, 0.08);
  --mm-badge-red-border: rgba(239, 35, 60, 0.18);
  --mm-badge-red-text: #EF233C;
  --mm-badge-green-bg: rgba(22, 163, 74, 0.08);
  --mm-badge-green-border: rgba(22, 163, 74, 0.18);
  --mm-badge-green-text: #16A34A;
  --mm-badge-blue-bg: rgba(37, 99, 235, 0.08);
  --mm-badge-blue-border: rgba(37, 99, 235, 0.18);
  --mm-badge-blue-text: #2563EB;
  --mm-badge-amber-bg: rgba(245, 158, 11, 0.08);
  --mm-badge-amber-border: rgba(245, 158, 11, 0.18);
  --mm-badge-amber-text: #B45309;

  /* === Price Colors === */
  --mm-price: #EF233C;
  --mm-price-old: #94A3B8;
  --mm-star: #FBBF24;

  /* === Farsi Elementor Theme Colors === */
  --fe-charcoal: #2D333D;
  --fe-cream: #F6F2EE;
  --fe-red: #E44C4A;
  --fe-gold: #F5CE6D;
  --fe-text: #1D1C1C;
  --fe-border: #C5CBD4;

  /* === Elessi Theme Colors === */
  --elessi-teal: #75BBAD;
  --elessi-dark: #171717;
  --elessi-form: #C9E4DD;
}

/* ===========================================
   TYPOGRAPHY SYSTEM
   =========================================== */

:root {
  /* === Font Stacks === */
  --mm-font: "Vazirmatn", "IRANSansX", "IRANSans", "IRANYekanX", "Dana", "Yekan Bakh", "Shabnam", "Segoe UI", Tahoma, Arial, sans-serif;
  --mm-font-num: "Vazirmatn", "IRANSansX", "IRANSans", "IRANYekanX", "Segoe UI", Tahoma, Arial, sans-serif;
  --mm-font-bold: "Vazirmatn", "IRANYekanX", "Tahoma", "Arial", sans-serif;
  --mm-font-technical: "IRANYekanX", "Courier New", monospace;
  --mm-font-friendly: "Shabnam", "Vazirmatn", "Tahoma", sans-serif;
  --mm-font-minimalist: "Sahel", "Vazirmatn", "Tahoma", sans-serif;
  --mm-font-traditional: "Samim", "Vazirmatn", "Tahoma", sans-serif;

  /* === Font Sizes === */
  --mm-h1: clamp(30px, 4.6vw, 64px);
  --mm-h2: clamp(24px, 3.3vw, 44px);
  --mm-h3: clamp(20px, 2.1vw, 28px);
  --mm-h4: clamp(18px, 1.5vw, 22px);
  --mm-body: clamp(14px, 1.05vw, 16px);
  --mm-small: clamp(12px, 0.95vw, 14px);
  --mm-mini: 11px;

  /* === Font Weights === */
  --mm-weight-thin: 100;
  --mm-weight-light: 300;
  --mm-weight-normal: 400;
  --mm-weight-medium: 500;
  --mm-weight-semibold: 600;
  --mm-weight-bold: 700;
  --mm-weight-extrabold: 800;
  --mm-weight-black: 900;

  /* === Line Heights === */
  --mm-lh-tight: 1.2;
  --mm-lh-snug: 1.3;
  --mm-lh-normal: 1.5;
  --mm-lh-relaxed: 1.75;
  --mm-lh-loose: 2;

  /* === Letter Spacing === */
  --mm-ls-tight: -0.05em;
  --mm-ls-normal: 0;
  --mm-ls-wide: 0.05em;
  --mm-ls-wider: 0.08em;
}

/* ===========================================
   SPACING SYSTEM
   =========================================== */

:root {
  /* === Container === */
  --mm-container: min(1180px, calc(100vw - 48px));
  --mm-container-wide: min(1320px, calc(100vw - 48px));
  --mm-container-narrow: min(960px, calc(100vw - 48px));

  /* === Section Spacing === */
  --mm-section: clamp(56px, 7vw, 112px);
  --mm-section-sm: clamp(34px, 5vw, 72px);

  /* === Gap System === */
  --mm-gap: clamp(16px, 2vw, 28px);
  --mm-gap-sm: 10px;
  --mm-gap-md: 18px;
  --mm-gap-lg: 28px;

  /* === Spacing Scale === */
  --mm-space-1: 4px;
  --mm-space-2: 8px;
  --mm-space-3: 12px;
  --mm-space-4: 16px;
  --mm-space-5: 20px;
  --mm-space-6: 24px;
  --mm-space-8: 32px;
  --mm-space-10: 40px;
  --mm-space-12: 48px;
  --mm-space-16: 64px;
  --mm-space-20: 80px;
  --mm-space-24: 96px;
}

/* ===========================================
   BORDER RADIUS SYSTEM
   =========================================== */

:root {
  --mm-radius-xs: 6px;
  --mm-radius-sm: 10px;
  --mm-radius: 16px;
  --mm-radius-md: 18px;
  --mm-radius-lg: 24px;
  --mm-radius-xl: 32px;
  --mm-radius-2xl: 34px;
  --mm-pill: 999px;
}

/* ===========================================
   SHADOW SYSTEM
   =========================================== */

:root {
  --mm-shadow-xs: 0 4px 14px rgba(15, 23, 42, 0.06);
  --mm-shadow-sm: 0 8px 22px rgba(17, 24, 39, 0.06);
  --mm-shadow: 0 18px 45px rgba(17, 24, 39, 0.09);
  --mm-shadow-md: 0 22px 60px rgba(15, 23, 42, 0.13);
  --mm-shadow-lg: 0 28px 80px rgba(17, 24, 39, 0.14);
  --mm-shadow-xl: 0 30px 90px rgba(15, 23, 42, 0.18);
  --mm-glow-red: 0 14px 34px rgba(239, 35, 60, 0.26);
  --mm-glow-blue: 0 14px 34px rgba(0, 166, 251, 0.22);
  --mm-shadow-card: 0 10px 30px rgba(0, 0, 0, 0.6);
}

/* ===========================================
   ANIMATION / MOTION SYSTEM
   =========================================== */

:root {
  --mm-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --mm-ease-pop: cubic-bezier(0.2, 0.95, 0.24, 1.2);
  --mm-ease-bounce: cubic-bezier(0.18, 0.89, 0.32, 1.28);
  --mm-fast: 160ms;
  --mm-med: 280ms;
  --mm-slow: 650ms;
  --mm-transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================================
   Z-INDEX SYSTEM
   =========================================== */

:root {
  --mm-z-dropdown: 90;
  --mm-z-sticky: 99;
  --mm-z-header: 999;
  --mm-z-drawer-backdrop: 120;
  --mm-z-drawer: 130;
  --mm-z-mega: 92;
  --mm-z-mobile-sticky: 100;
  --mm-z-toast: 160;
  --mm-z-modal: 200;
  --mm-z-mobile-nav: 9999;
}

/* ===========================================
   GRID SYSTEM
   =========================================== */

:root {
  --mm-grid-cols: 4;
  --mm-grid-gap: clamp(14px, 2vw, 26px);
}

/* ===========================================
   FORM SYSTEM
   =========================================== */

:root {
  --mm-input-height: 48px;
  --mm-input-height-sm: 42px;
  --mm-input-height-lg: 54px;
  --mm-input-radius: 14px;
  --mm-input-border: var(--mm-border-light-2);
  --mm-input-focus-border: rgba(239, 35, 60, 0.38);
  --mm-input-focus-shadow: 0 0 0 4px rgba(239, 35, 60, 0.08);
}