/* ===== DESIGN TOKENS - شاه ترند ===== */
/* Enterprise-level design tokens for شاه ترند */

:root {
  /* ===== Core Brand Colors ===== */
  --color-brand-ai-purple: #7C3AED;        /* AI Purple - Technology & Innovation */
  --color-brand-primary-blue: #2563EB;     /* Trust Blue - Professional & Reliable */
  --color-brand-cta-orange: #F59E0B;       /* CTA Orange - Action & Energy */
  --color-brand-success: #059669;          /* Success Green - Positive Actions */
  
  /* ===== zone Integration Colors ===== */
  --color-zone-dark: #141920;              /* Primary Navigation */
  --color-zone-secondary: #232F3F;         /* Secondary Backgrounds */
  --color-zone-orange: #FF9900;            /* Primary Actions */
  --color-zone-prime: #00B9E7;             /* Premium Features */
  --color-zone-gold: #F19D38;              /* Borders & Accents */
  --color-zone-yellow: #F4BF76;            /* Search & Highlights */
  
  /* ===== Header Context Colors ===== */
  --color-header-text: #FFFFFF;            /* Header Text - Pure White */
  --color-header-text-hover: #FFFFFF;      /* Header Text Hover - Pure White */
  --color-header-text-active: #FF9900;     /* Header Text Active - zone Orange */
  --color-header-heading: var(--color-header-text);      /* Header Headings - White */
  
  /* ===== Semantic Colors ===== */
  --color-background-primary: #FFFFFF;
  --color-background-secondary: #F8FAFC;
  --color-background-tertiary: #F1F5F9;
  --color-text-primary: #0F172A;
  --color-text-secondary: #475569;
  --color-text-tertiary: #64748B;
  
  /* ===== Border Colors ===== */
  --color-border-primary: #E2E8F0;
  --color-border-secondary: #CBD5E1;
  --color-border-tertiary: #F1F5F9;
  
  /* ===== Status Colors ===== */
  --color-success: #059669;
  --color-warning: #D97706;
  --color-error: #DC2626;
  --color-info: #2563EB;
  
  /* ===== Spacing System ===== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;
  
  /* Legacy spacing for compatibility */
  --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-16: 64px;
  --space-20: 80px;
  --space-24: 96px;
  
  /* ===== Typography Scale ===== */
  --font-size-xs: 0.75rem;    /* 12px */
  --font-size-sm: 0.875rem;   /* 14px */
  --font-size-base: 1rem;     /* 16px */
  --font-size-lg: 1.125rem;   /* 18px */
  --font-size-xl: 1.25rem;    /* 20px */
  --font-size-2xl: 1.5rem;    /* 24px */
  --font-size-3xl: 1.875rem;  /* 30px */
  --font-size-4xl: 2.25rem;   /* 36px */
  --font-size-5xl: 3rem;      /* 48px */
  --font-size-6xl: 3.75rem;   /* 60px */
  
  /* Font weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  
  /* Legacy typography for compatibility */
  --text-xs: 0.75rem;    /* 12px */
  --text-sm: 0.875rem;   /* 14px */
  --text-base: 1rem;     /* 16px */
  --text-lg: 1.125rem;   /* 18px */
  --text-xl: 1.25rem;    /* 20px */
  --text-2xl: 1.5rem;    /* 24px */
  --text-3xl: 1.875rem;  /* 30px */
  --text-4xl: 2.25rem;   /* 36px */
  --text-5xl: 3rem;      /* 48px */
  --text-6xl: 3.75rem;   /* 60px */
  
  /* ===== Border Radius ===== */
  --border-radius-sm: 4px;
  --border-radius-md: 8px;
  --border-radius-lg: 12px;
  --border-radius-xl: 16px;
  --border-radius-2xl: 24px;
  --border-radius-full: 9999px;
  
  /* Legacy border radius for compatibility */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-2xl: 24px;
  --radius-full: 9999px;
  
  /* ===== Shadows ===== */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
  
  /* ===== Layout Variables ===== */
  --layout-max-width: 1200px;
  --header-height: 80px;
  --header-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  
  /* ===== Z-Index Scale ===== */
  --z-index-dropdown: 1000;
  --z-index-header: 100;
  --z-index-modal: 2000;
  --z-index-tooltip: 3000;
  
  /* ===== Transitions ===== */
  --transition-duration: 0.2s;
  --transition-timing: ease;
  
  /* ===== Header Variables ===== */
  --header-bg: var(--color-zone-dark);
  --header-border: rgba(255, 255, 255, 0.1);
  --hit: 80px; /* Header Item Target */
  --container-max: 1200px;
  --nav-gap: var(--space-4);
  
  /* ===== Header Hover Variables ===== */
  --header-item-hover-border: rgba(255, 255, 255, 0.2);
  --header-item-hover-border-radius: var(--border-radius-md);
  --header-item-hover-padding: var(--spacing-sm) var(--spacing-md);
  --header-item-transition: all var(--transition-duration) var(--transition-timing);
  
  /* ===== Search Variables ===== */
  --search-bg: white;
  --search-border: var(--color-border-primary);
  --search-radius: var(--radius-md);
  --search-text: var(--color-text-primary);
  --search-icon: var(--color-text-tertiary);
  --search-width: 320px;
  
  /* ===== Dropdown Variables ===== */
  --zone-dropdown-bg: #232f3f88 ;
  --zone-dropdown-text: var(--color-header-text);
  --zone-dropdown-border: var(--color-zone-secondary);
  --zone-dropdown-shadow: rgba(0, 0, 0, 0.3);
  --zone-dropdown-hover: var(--color-zone-secondary);
  --zone-dropdown-divider: var(--color-zone-gold);
  --zone-dropdown-header: var(--color-zone-secondary);
  
  /* ===== Mobile Menu Variables ===== */
  --mobile-menu-bg: #fff;
  --mobile-menu-text: #3a3a3a;
  --mobile-menu-text-hover: #000;
  --mobile-menu-border: #e9e9e9;
  --mobile-menu-shadow: none;
  --mobile-menu-width: 310px;
  --mobile-menu-height: calc(100vh - 2rem);
  --mobile-menu-z-index: 999;
  
  /* ===== Mobile Menu 2 Variables ===== */
  --mobile-menu-2-bg: #fff;
  --mobile-menu-2-text: #000;
  --mobile-menu-2-hover: #f5f5f5;
  --mobile-menu-2-height: 70px;
  --mobile-menu-2-z-index: 20;
  
  /* ===== Items Menu Variables ===== */
  --items-menu-bg: #fff;
  --items-menu-text: #202020;
  --items-menu-border: #e8e8e8;
  --items-menu-divider: #dfdfdf;
  --items-menu-shadow: grey;
  --items-menu-z-index: 9;
  
  /* ===== Blur Overlay Variables ===== */
  --blur-bg: rgba(36, 93, 153, 0.43);
  --blur-z-index: 8;
  
  /* ===== Search Bar Variables ===== */
  --search-bar-height: 60px;
  --search-bar-z-index: 99;
  --search-input-shadow: inset 0 0 20px -13px #9d9d9d;
  
  /* ===== Specific Dimensions ===== */
  --header-logo-width: 180px;
  --search-dropdown-width: 300px;
  --search-input-height: 50px;
  --search-input-min-width: 300px;
  --mobile-search-top: 60px;
  --mobile-menu-top: 1rem;
  --mobile-menu-right: 10px;
  --items-menu-top: 60px;
  
  /* ===== Specific Spacing ===== */
  --header-padding: 0 1rem 0 0;
  --menu-item-margin: 0 0.6rem;
  --menu-item-padding: 0 0.5rem;
  --mobile-item-margin: 0 1rem;
  --mobile-item-padding: 0.8rem 1rem;
  --mobile-menu-2-padding: 0.75rem 0.5rem;
  --items-category-padding: 0.5rem;
  --items-submenu-padding: 0.9rem;
  
  /* ===== Specific Font Sizes ===== */
  --search-input-font-size: 1.4rem;
  --menu-item-font-size: 15px;
  --mobile-item-font-size: 1.15rem;
  --mobile-menu-2-font-size: 0.9rem;
  --items-category-font-size: 1rem;
  --mobile-footer-font-size: 0.9rem;
  --mobile-footer-icon-size: 1.1rem;
  
  /* ===== Specific Z-Indices ===== */
  --mobile-menu-z-index: 999;
  --mobile-menu-2-z-index: 20;
  --search-bar-z-index: 99;
  --blur-z-index: 8;
  --items-menu-z-index: 9;
  --items-submenu-z-index: 99;



  /* ===== Specific transparent ==== */
  --bg-hover-half-white: #ffffffaa;

  /* ===== Product Page Tokens ===== */
  /* Product header colors */
  --product-header-bg: #ffffff;
  --product-content-gap: 12.1px;
  --product-category-opacity: 0.5;
  --product-accent-height: 8px;
  --product-accent-width: 40px;
  --product-title-margin-top: 7.9px;
  
  /* Rating and engagement */
  --rating-gap: 32px;
  --rating-stars-gap: 8px;
  --rating-stars-size: 25px;
  --rating-text-size: 17.6px;
  --rating-text-line-height: 17.6px;
  
  /* Action buttons */
  --action-buttons-gap: 16px;
  --action-btn-bg: #f5f5f5;
  --action-btn-padding: 4px 8px;
  --action-btn-radius: 8px;
  --action-btn-gap: 8px;
  --action-icon-size: 22px;
  
  /* Purchase section */
  --purchase-bg: #f8fafc;
  --purchase-border: #e2e8f0;
  --purchase-radius: 8px;
  --purchase-padding: 16px;
  --purchase-margin-bottom: 20px;
  
  /* Button styles */
  --btn-buy-bg: #7C3AED;
  --btn-buy-color: #ffffff;
  --btn-buy-radius: 5.6px;
  --btn-buy-height: 40px;
  --btn-buy-padding: 8px 16px;
  --btn-buy-hover: #6B21A8;
  
  --btn-add-bg: #ffffff;
  --btn-add-border: #F59E0B;
  --btn-add-color: #F59E0B;
  --btn-add-hover-bg: #FFF7ED;
  
  /* Price styling */
  --price-font-weight: 700;
  --price-font-size: 20px;
  --price-line-height: 28px;
  --price-promo-color: #ff6347;
  --price-default-opacity: 0.5;
  
  /* Sticky bar */
  --sticky-bar-bg: #ffffff;
  --sticky-bar-border: #e5e7eb;
  --sticky-bar-radius: 8px;
  --sticky-bar-padding: 16px;
  --sticky-bar-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.1), 0px 1px 2px 0px rgba(0, 0, 0, 0.06);
  
  /* Price pill */
  --price-pill-bg: #f8fafc;
  --price-pill-border: #e2e8f0;
  --price-pill-radius: 6px;
  --price-pill-padding: 12px 16px;
  --price-pill-gap: 8px;
  
  /* License selection */
  --license-option-padding: 12px;
  --license-option-gap: 12px;
  --license-option-border: #e5e7eb;
  --license-option-radius: 8px;
  --license-option-bg: #fff;
  --license-option-hover-border: #d1d5db;
  --license-option-hover-shadow: 0 1px 4px rgba(0,0,0,.06);
  
  /* Group buy */
  --group-buy-progress-height: 0.5rem;
  --group-buy-progress-bg: #F1F5F9;
  --group-buy-progress-fill: #F59E0B;
  --group-buy-note-size: 0.75rem;
  --group-buy-note-color: #475569;

}