/* Typography - Vazirmatn Font */
html {
  --font-vazir: 'Vazirmatn', sans-serif;
  --font-display: 700 var(--font-size-fluid-3) var(--font-vazir);
  --font-heading: 600 var(--font-size-fluid-2) var(--font-vazir);
  --font-subheading: 500 var(--font-size-fluid-1) var(--font-vazir);
  --font-body: var(--font-size-fluid-0) var(--font-vazir);
  --font-caption: var(--font-size-0) var(--font-vazir);
  --font-code: var(--font-size-fluid-0) var(--font-monospace-code);
}

html {
  /* Neutral colors - استفاده از slate برای ظاهر حرفه‌ای */
  --color-neutral-1: var(--slate-1);
  --color-neutral-2: var(--slate-2);
  --color-neutral-3: var(--slate-3);
  --color-neutral-4: var(--slate-4);
  --color-neutral-5: var(--slate-5);
  --color-neutral-6: var(--slate-6);
  --color-neutral-7: var(--slate-7);
  --color-neutral-8: var(--slate-8);
  --color-neutral-9: var(--slate-9);
  --color-neutral-10: var(--slate-10);
  --color-neutral-11: var(--slate-11);
  --color-neutral-12: var(--slate-12);
  --color-neutral-contrast: var(--slate-contrast);

  /* Accent colors - ترکیب violet و indigo برای تم مدرن VPN */
  --color-accent-1: var(--indigo-1);
  --color-accent-2: var(--indigo-2);
  --color-accent-3: var(--indigo-3);
  --color-accent-4: var(--indigo-4);
  --color-accent-5: var(--indigo-5);
  --color-accent-6: var(--indigo-6);
  --color-accent-7: var(--indigo-7);
  --color-accent-8: var(--indigo-8);
  --color-accent-9: var(--indigo-9);
  --color-accent-10: var(--indigo-10);
  --color-accent-11: var(--indigo-11);
  --color-accent-12: var(--indigo-12);
  --color-accent-contrast: var(--indigo-contrast);

  /* Secondary accent - cyan برای المان‌های ثانویه */
  --color-secondary-1: var(--cyan-1);
  --color-secondary-2: var(--cyan-2);
  --color-secondary-3: var(--cyan-3);
  --color-secondary-4: var(--cyan-4);
  --color-secondary-5: var(--cyan-5);
  --color-secondary-6: var(--cyan-6);
  --color-secondary-7: var(--cyan-7);
  --color-secondary-8: var(--cyan-8);
  --color-secondary-9: var(--cyan-9);
  --color-secondary-10: var(--cyan-10);
  --color-secondary-11: var(--cyan-11);
  --color-secondary-12: var(--cyan-12);
  --color-secondary-contrast: var(--cyan-contrast);

  /* Error colors - red برای هشدارها */
  --color-error-1: var(--red-1);
  --color-error-2: var(--red-2);
  --color-error-3: var(--red-3);
  --color-error-4: var(--red-4);
  --color-error-5: var(--red-5);
  --color-error-6: var(--red-6);
  --color-error-7: var(--red-7);
  --color-error-8: var(--red-8);
  --color-error-9: var(--red-9);
  --color-error-10: var(--red-10);
  --color-error-11: var(--red-11);
  --color-error-12: var(--red-12);
  --color-error-contrast: var(--red-contrast);

  /* Success colors - green برای موفقیت */
  --color-success-1: var(--green-1);
  --color-success-2: var(--green-2);
  --color-success-3: var(--green-3);
  --color-success-4: var(--green-4);
  --color-success-5: var(--green-5);
  --color-success-6: var(--green-6);
  --color-success-7: var(--green-7);
  --color-success-8: var(--green-8);
  --color-success-9: var(--green-9);
  --color-success-10: var(--green-10);
  --color-success-11: var(--green-11);
  --color-success-12: var(--green-12);
  --color-success-contrast: var(--green-contrast);

  /* Warning colors - amber برای هشدارها */
  --color-warning-1: var(--amber-1);
  --color-warning-2: var(--amber-2);
  --color-warning-3: var(--amber-3);
  --color-warning-4: var(--amber-4);
  --color-warning-5: var(--amber-5);
  --color-warning-6: var(--amber-6);
  --color-warning-7: var(--amber-7);
  --color-warning-8: var(--amber-8);
  --color-warning-9: var(--amber-9);
  --color-warning-10: var(--amber-10);
  --color-warning-11: var(--amber-11);
  --color-warning-12: var(--amber-12);
  --color-warning-contrast: var(--amber-contrast);

  /* Info colors - sky برای اطلاعات */
  --color-info-1: var(--sky-1);
  --color-info-2: var(--sky-2);
  --color-info-3: var(--sky-3);
  --color-info-4: var(--sky-4);
  --color-info-5: var(--sky-5);
  --color-info-6: var(--sky-6);
  --color-info-7: var(--sky-7);
  --color-info-8: var(--sky-8);
  --color-info-9: var(--sky-9);
  --color-info-10: var(--sky-10);
  --color-info-11: var(--sky-11);
  --color-info-12: var(--sky-12);
  --color-info-contrast: var(--sky-contrast);

  /* Premium colors - gold برای امکانات پرمیوم */
  --color-premium-1: var(--gold-1);
  --color-premium-2: var(--gold-2);
  --color-premium-3: var(--gold-3);
  --color-premium-4: var(--gold-4);
  --color-premium-5: var(--gold-5);
  --color-premium-6: var(--gold-6);
  --color-premium-7: var(--gold-7);
  --color-premium-8: var(--gold-8);
  --color-premium-9: var(--gold-9);
  --color-premium-10: var(--gold-10);
  --color-premium-11: var(--gold-11);
  --color-premium-12: var(--gold-12);
  --color-premium-contrast: var(--gold-contrast);

  /* Gradient backgrounds برای تم مدرن */
  --gradient-primary: linear-gradient(135deg, var(--indigo-9) 0%, var(--violet-9) 100%);
  --gradient-secondary: linear-gradient(135deg, var(--cyan-9) 0%, var(--blue-9) 100%);
  --gradient-success: linear-gradient(135deg, var(--green-9) 0%, var(--teal-9) 100%);
  --gradient-premium: linear-gradient(135deg, var(--gold-9) 0%, var(--amber-9) 100%);
  
  /* Glass morphism effects */
  --glass-bg: rgba(255, 255, 255, 0.1);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.1);
  --glass-blur: blur(10px);
}

/* Dark mode adjustments */
@media (prefers-color-scheme: dark) {
  html {
    --glass-bg: rgba(0, 0, 0, 0.3);
    --glass-border: rgba(255, 255, 255, 0.1);
  }
}