/* ============================================
   CSS Design Tokens - Consolidated Variables
   ============================================ */

:root {
   /* ============================================
       Colors - Primary
       ============================================ */
   --color-primary-blue: #1c2474;
   --color-primary-blue-hover: #151a5c;
   /* UNUSED: --color-primary-blue-active: #0f1242; */
   /* UNUSED: --color-primary-blue-light: #1c2474; (duplicate of --color-primary-blue) */
   /* UNUSED: --color-primary-blue-dark: #0f1242; (duplicate of active) */

   /* ============================================
       Colors - Secondary
       ============================================ */
   --color-secondary-gold: #b49659;

   /* ============================================
       Colors - Background
       ============================================ */
   --color-bg-main: #fafbff;
   --color-bg-card: #ffffff;
   --color-bg-light: #fafbff;
   --color-bg-lighter: #e9ecef;
   /* UNUSED: --color-bg-modal-overlay: rgba(0, 0, 0, 0.5); */

   /* ============================================
       Colors - Text
       ============================================ */
   --color-text-primary: #1a1a1a;
   --color-text-secondary: #666666;
   --color-text-muted: #9e9e9e;
   --color-text-white: #ffffff;

   /* ============================================
       Colors - Status
       ============================================ */
   --color-status-success: #388e3c;
   /* UNUSED: --color-status-success-bg: rgba(56, 142, 60, 0.1); (use --color-status-positive-bg) */
   --color-status-error: #d32f2f;
   /* UNUSED: --color-status-error-bg: rgba(211, 47, 47, 0.1); */
   --color-status-pending: #ff9800;
   /* UNUSED: --color-status-pending-bg: rgba(255, 152, 0, 0.1); */
   --color-status-positive: #388e3c;
   --color-status-positive-bg: rgba(56, 142, 60, 0.1);
   /* UNUSED: --color-status-negative: #d32f2f; (duplicate of --color-status-error) */
   /* UNUSED: --color-status-negative-bg: rgba(211, 47, 47, 0.1); */

   /* ============================================
       Colors - Border
       ============================================ */
   --color-border-light: #e0e0e0;
   --color-border-dark: #e4e4e4;
   /* UNUSED: --color-border-medium: #e8e8e8; */
   /* UNUSED: --color-border-lighter: #f0f0f0; */
   --color-border-focus: #1c2474;

   /* ============================================
       Colors - Interactive
       ============================================ */
   --color-overlay-white: rgba(255, 255, 255, 0.15);
   /* UNUSED: --color-interactive-focus-shadow: rgba(28, 36, 116, 0.08); */

   /* ============================================
       Spacing
       ============================================ */
   --spacing-xs: 4px;
   --spacing-sm: 8px;
   --spacing-md: 12px;
   --spacing-lg: 16px;
   --spacing-xl: 20px;
   --spacing-2xl: 24px;
   --spacing-3xl: 28px;
   --spacing-4xl: 32px;

   --header-height: 38px;

   /* ============================================
       Border Radius
       ============================================ */
   --radius-sm: 4px;
   --radius-md: 6px;
   --radius-default: 8px;
   --radius-card: 8px;
   --radius-lg: 12px;
   /* UNUSED: --radius-xl: 16px; */

   /* ============================================
       Shadows
       ============================================ */
   --shadow-card: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.06);
   --shadow-input-focus: 0 0 0 3px rgba(28, 36, 116, 0.08);
   /* UNUSED: --shadow-modal: 0 4px 6px rgba(0, 0, 0, 0.1), 0 2px 4px rgba(0, 0, 0, 0.06); */
   /* UNUSED: --shadow-card-hover: 0 2px 4px rgba(28, 36, 116, 0.1); */
   --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
   --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
   --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
   --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);
   /* UNUSED: --shadow-button: 0 2px 4px rgba(0, 0, 0, 0.1); */
   --shadow-button-hover: 0 4px 8px rgba(0, 0, 0, 0.15);
   --shadow-header: 0 2px 4px rgba(0, 0, 0, 0.05);

   /* ============================================
       Transitions
       ============================================ */
   --transition-fast: 0.2s ease;
   /* UNUSED: --transition-medium: 0.3s ease; */
   /* UNUSED: --transition-slow: 0.5s ease; */
   /* UNUSED: --transition-normal: 0.3s; */
   --transition-opacity: opacity 0.3s ease;
   --transition-color: color 0.3s ease;
   --transition-all: all 0.3s ease;
   /* UNUSED: --transition-transform: transform 0.3s ease; */
   /* UNUSED: --transition-ease: ease; */

   /* ============================================
       Typography - Font Sizes
       ============================================ */
   /* UNUSED: --font-size-bank-card-number: 16px; */
   /* UNUSED: --font-size-bank-card-name: 12px; */
   --font-size-xs: 0.75rem;
   --font-size-sm: 0.75rem;
   --font-size-base: 0.875rem;
   --font-size-lg: 1.125rem;
   --font-size-xl: 1.25rem;
   --font-size-2xl: 1.5rem;
   /* UNUSED: --font-size-3xl: 28px; */
   /* UNUSED: --font-size-4xl: 32px; */
   /* UNUSED: --font-size-5xl: 36px; */

   /* Typography - Heading Sizes (Mobile First) */
   --font-size-h1: 2rem;
   --font-size-h2: 1.5rem;
   --font-size-h3: 1rem;
   /* UNUSED: --font-size-h4: 20px; */
   /* UNUSED: --font-size-h5: 18px; */
   /* UNUSED: --font-size-h6: 16px; */
   --font-size-tab: 1rem;
   --font-size-input: 1rem;
   --font-size-bar-title: 0.75rem;
   --font-size-faq-title: 1rem;
   --font-size-box-caption: 0.875rem;
   --font-size-product-small: 0.7rem;
   --font-size-product-xs: 0.65rem;
   --font-size-product-cart-title: 1.025rem;


   /* Typography - Font Families */
   --font-family-heading: 'Doran', 'iranyekan', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   --font-family-body: 'iranyekan', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', 'Arial', sans-serif;

   /* Typography - Font Weights */
   --font-weight-normal: 400;
   --font-weight-medium: 500;
   --font-weight-semibold: 600;
   --font-weight-bold: 700;
   --font-weight-extrabold: 800;

   /* Typography - Line Heights */
   /* UNUSED: --line-height-tight: 1.2; */
   --line-height-normal: 1.5;
   --line-height-relaxed: 1.75;

   /* ============================================
       Layout
       ============================================ */
   --container-width: 1400px;
   --border-width: 1px;
   /* UNUSED: --padding-container: 16px; */
   --padding-section: 48px;
   --padding-horizental: 24px;
   --padding-horizental-product: 24px;

   --padding-header: 20px 24px;
   --padding-button: 12px 24px;
   --height-button-sm: 40px;
   --height-button-md: 44px;
   --height-button-lg: 48px;
   /* UNUSED: --padding-input: 12px 16px; */
   --padding-card: 24px;
   --grid-gap-md: 24px;
   /* UNUSED: --grid-gap-lg: 32px; */

   /* ============================================
       Z-Index
       ============================================ */
   --z-index-modal: 1000;
   /* UNUSED: --z-index-overlay: 999; */
   /* UNUSED: --z-index-dropdown: 100; */
   /* UNUSED: --z-index-sticky: 10; */
   /* UNUSED: --z-index-default: 0; */
   --z-index-toast: 10000;
   --z-index-fixed: 1030;
}

/* Small Mobile (320px - 578px) */
@media (max-width: 360px) {
   :root {
      --header-height: 34px;
   }
}

/* Tablet and up (579px+) */
@media (min-width: 579px) {
   :root {
      --header-height: 46px;
      --font-size-h1: 36px;
      --font-size-h2: 1.75rem;
      --font-size-h3: 1.25rem;
      --font-size-base: 0.875rem;
      --font-size-tab: 1.15rem;
      --font-size-box-caption: 0.875rem;
      --padding-section: 52px;
      --padding-horizental: 24px;
      --padding-horizental-product: 42px;
      --font-size-bar-title: 0.915rem;
      --font-size-faq-title: 1.125rem;

      --height-button-sm: 42px;
      --height-button-md: 46px;
      --height-button-lg: 50px;
   }
}

/* Desktop (1078px+) */
@media (min-width: 1078px) {
   :root {
      --font-size-h1: 40px;
      --font-size-h2: 1.75rem;
      --font-size-h3: 1.5rem;
      --font-size-base: 1rem;
      --font-size-box-caption: 1rem;
      --padding-header: 24px 42px;
      --padding-horizental: 42px;
      --padding-horizental-product: 60px;
      --height-button-sm: 44px;
      --height-button-md: 48px;
      --height-button-lg: 52px;
   }
}

/* Large Desktop (1400px+) */
@media (min-width: 1400px) {
   :root {
      --padding-header: 26px 0px;
      --padding-horizental: 24px;
      --padding-horizental-product: 42px;
      --padding-section: 80px;
      --height-button-sm: 46px;
      --height-button-md: 50px;
      --height-button-lg: 54px;
      --font-size-h2: 2rem;
   }
}