/**
 * Typography — The Doctor Agency ERP (MEGA-BUNDLE 3, Task 3.4)
 *
 * Luxury typography system:
 *   Headings: Playfair Display (Latin) + Amiri (Arabic) — serif, warm
 *   Body:     Montserrat (Latin) + Cairo (Arabic) — clean, modern
 *
 * Bonuses baked in:
 *   B3 Fluid sizes via clamp() — scales smoothly mobile→desktop
 *   B4 Tabular nums — tables, prices, KPIs align
 *   B5 Font preset system — 3 variants (classical / modern / elegant)
 *
 * The Google Fonts <link> tags belong in index.html (one-time addition).
 */

:root {
  /* Default preset = classical (Playfair + Amiri / Montserrat + Cairo) */
  --font-heading-latin:  'Playfair Display', Georgia, 'Times New Roman', serif;
  --font-heading-arabic: 'Amiri', 'Traditional Arabic', serif;
  --font-heading:        var(--font-heading-arabic), var(--font-heading-latin);

  --font-body-latin:     'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body-arabic:    'Cairo', 'Segoe UI Arabic', 'Tahoma', sans-serif;
  --font-body:           var(--font-body-arabic), var(--font-body-latin);

  /* Fluid font scale (Bonus B3) */
  --font-size-xs:   clamp(0.70rem, 0.65rem + 0.25vw, 0.75rem);
  --font-size-sm:   clamp(0.80rem, 0.75rem + 0.25vw, 0.875rem);
  --font-size-base: clamp(0.875rem, 0.80rem + 0.35vw, 1rem);
  --font-size-lg:   clamp(1.00rem, 0.90rem + 0.50vw, 1.125rem);
  --font-size-xl:   clamp(1.125rem, 1.00rem + 0.75vw, 1.375rem);
  --font-size-2xl:  clamp(1.375rem, 1.20rem + 1.00vw, 1.75rem);
  --font-size-3xl:  clamp(1.625rem, 1.40rem + 1.50vw, 2.25rem);
  --font-size-4xl:  clamp(1.875rem, 1.50rem + 2.50vw, 3.00rem);

  --font-weight-regular: 400;
  --font-weight-medium:  500;
  --font-weight-semi:    600;
  --font-weight-bold:    700;
  --font-weight-heavy:   800;

  --line-height-tight:   1.2;
  --line-height-heading: 1.3;
  --line-height-base:    1.6;    /* comfortable reading */
  --line-height-loose:   1.8;

  --letter-spacing-tight:  -0.02em;
  --letter-spacing-normal:  0;
  --letter-spacing-wide:    0.02em;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Base — body + paragraphs                                                   */
/* ══════════════════════════════════════════════════════════════════════════ */
body {
  font-family: var(--font-body);
  font-weight: 300;                  /* light weight, luxurious */
  font-size: var(--font-size-base);
  line-height: var(--line-height-base);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'kern' 1, 'liga' 1, 'calt' 1;
}

p, span, li, td, th, label, input, textarea, select {
  font-family: inherit;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Headings                                                                   */
/* ══════════════════════════════════════════════════════════════════════════ */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-heading);
  letter-spacing: var(--letter-spacing-tight);
  margin: 0 0 0.4em;
}
h1 { font-size: var(--font-size-4xl); font-weight: var(--font-weight-heavy); }
h2 { font-size: var(--font-size-3xl); font-weight: var(--font-weight-heavy); }
h3 { font-size: var(--font-size-2xl); }
h4 { font-size: var(--font-size-xl); }
h5 { font-size: var(--font-size-lg); }
h6 { font-size: var(--font-size-base); letter-spacing: var(--letter-spacing-wide); text-transform: uppercase; }

/* ══════════════════════════════════════════════════════════════════════════ */
/* Tabular numbers (Bonus B4) — tables, prices, KPIs                         */
/* ══════════════════════════════════════════════════════════════════════════ */
table, .kpi-number, .price, .currency, .stat-value, .ff-slider-val, .cf-card-meta .cf-badge,
td.numeric, th.numeric {
  font-variant-numeric: tabular-nums;
  font-feature-settings: 'tnum' 1;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Font presets (Bonus B5) — Branding Tab swaps via preset attribute         */
/* ══════════════════════════════════════════════════════════════════════════ */
:root[data-font-preset="modern"] {
  --font-heading-latin:  'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-heading-arabic: 'Tajawal', 'Segoe UI Arabic', sans-serif;
  --font-body-latin:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-body-arabic:    'Tajawal', 'Segoe UI Arabic', sans-serif;
}
:root[data-font-preset="elegant"] {
  --font-heading-latin:  'Cormorant Garamond', 'Playfair Display', Georgia, serif;
  --font-heading-arabic: 'Markazi Text', 'Amiri', 'Traditional Arabic', serif;
  --font-body-latin:     'Cormorant', Georgia, serif;
  --font-body-arabic:    'Markazi Text', 'Amiri', serif;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* RTL-safe — direction is inherited; explicit Arabic-only overrides         */
/* ══════════════════════════════════════════════════════════════════════════ */
[dir="rtl"] {
  font-family: var(--font-body-arabic), var(--font-body-latin);
}
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3,
[dir="rtl"] h4, [dir="rtl"] h5, [dir="rtl"] h6 {
  font-family: var(--font-heading-arabic), var(--font-heading-latin);
  letter-spacing: normal;    /* Arabic doesn't want negative tracking */
}

/* Arabic body lean toward Cairo Light (weight 300) */
[lang="ar"] p, [lang="ar"] span, [dir="rtl"] body {
  font-weight: 300;
}

/* ══════════════════════════════════════════════════════════════════════════ */
/* Reading Width Optimizer (Bonus B5 from spec Task 3.5)                      */
/* ══════════════════════════════════════════════════════════════════════════ */
.readable-content p,
.docs-content p,
.help-page p {
  max-width: 65ch;
}