/* ==========================================================================
   هنرستان هدف برتر — سیستم طراحی (Design System)
   ========================================================================== */

@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('../fonts/Vazirmatn-Regular.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('../fonts/Vazirmatn-Medium.woff2') format('woff2');
}
@font-face {
  font-family: 'Vazirmatn';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('../fonts/Vazirmatn-Bold.woff2') format('woff2');
}

:root {
  /* رنگ اصلی — سرمه‌ای تیره */
  --color-primary-dark: #0F2A3D;
  --color-primary: #1B4560;
  --color-primary-light: #3D6B8A;

  /* رنگ تاکیدی — طلایی گرم، فقط برای دکمه‌ها و نکات مهم */
  --color-accent: #C9973E;
  --color-accent-hover: #B3822E;

  /* خنثی — پس‌زمینه روشن و گرم */
  --color-bg: #F7F7F5;
  --color-surface: #FFFFFF;
  --color-text: #1B2430;
  --color-text-secondary: #5C6773;
  --color-border: #E6E4DE;

  /* وضعیت */
  --color-success: #2F855A;
  --color-error: #C53030;

  /* فاصله‌گذاری — بر پایه ۸px */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;

  /* شعاع گردی — طبق اسپک جدید همه‌جا گردتر شد */
  --radius-sm: 10px;
  --radius: 18px;
  --radius-lg: 24px;

  /* سایه‌ها — همیشه نرم، هیچ‌جا سایه‌ی سخت نمی‌خوایم */
  --shadow-sm: 0 2px 8px rgba(15, 42, 61, 0.06);
  --shadow-md: 0 12px 32px -12px rgba(15, 42, 61, 0.16);
  --shadow-lg: 0 24px 48px -16px rgba(15, 42, 61, 0.22);

  /* فونت */
  --font-main: 'Vazirmatn', 'Tahoma', sans-serif;

  /* حداکثر عرض محتوا */
  --content-width: 1320px;
}
/* ==========================================================================
   Alias ها — برای هماهنگی بین اسم‌گذاری قدیمی کدهای صفحات با متغیرهای اصلی بالا
   ========================================================================== */
:root {
  --color-navy-900: var(--color-primary-dark);
  --color-navy-800: var(--color-primary);
  --color-navy-700: var(--color-primary);
  --color-navy-600: var(--color-primary-light);

  --color-gold-500: var(--color-accent);
  --color-gold-400: #D9AF63;
  --color-gold-300: #E8C68A;

  --color-bg-cream: var(--color-bg);
  --color-bg-white: var(--color-surface);
  --color-bg-soft: #F1EFE8;

  --color-text-main: var(--color-text);
  --color-text-soft: var(--color-text-secondary);

  --color-icon-bg: #EAF1F7;
  --color-icon-fg: var(--color-primary-dark);

  --hero-overlay-top: rgba(15, 42, 61, 0.35);
  --hero-overlay-bottom: rgba(15, 42, 61, 0.75);

  --font-vazir: var(--font-main);

  --space-xs: var(--space-1);
  --space-sm: var(--space-2);
  --space-md: var(--space-3);
  --space-lg: 40px;
  --space-xl: var(--space-6);
  --space-2xl: var(--space-7);
  --space-3xl: 140px;

  --radius-md: var(--radius);
  --radius-pill: 999px;

  --shadow-gold: 0 10px 25px rgba(201, 151, 62, 0.25);

  --transition-fast: 200ms ease;
  --transition-base: 300ms cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 500ms cubic-bezier(0.4, 0, 0.2, 1);

  --container-max: var(--content-width);
}