/* ============================================================================
   Titles — Google Sans Flex at weight 500.

   Two things worth knowing about how this is written.

   1. 'KO Sans' still leads every stack. It is unicode-range scoped to Arabic
      (see ko-sans.css), so it costs nothing for Latin text but keeps mixed
      strings — a supplier named "مزايا بغداد" beside "Menu 12" — rendering the
      Arabic run in the Arabic face rather than a fallback. Dropping it here
      would have broken exactly the titles most likely to be Arabic: supplier
      and product names.

   2. Every selector is prefixed with `body`. The title classes are defined in
      <style> blocks scattered through the templates, several of which appear
      *after* this file is linked in <head> — an unprefixed `.st-card-title`
      would lose to them on source order. The extra element bumps specificity
      to (0,1,1) so it wins wherever it sits in the document.

   The face is a variable one spanning 400-700, so 500 is a real instance of
   the file rather than a weight the browser fakes by smearing 400.

   The wordmark (تدبير) is deliberately untouched: it names 'Kufam' inline,
   and inline styles outrank this.
   ========================================================================= */

:root {
    --title-font: 'KO Sans', 'Google Sans Flex', 'Google Sans', -apple-system,
                  BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

body h1,
body h2,
body h3,
body h4,
body h5,
body h6,
/* Named title elements across the four pages */
body .st-card-title,
body .st-kpi-label,
body .chart-title,
body .inv-collapse-title,
body .pos-left-title,
body .rt-supplier-name,
body .ts-title-text,
body .ts-headline,
body .app-settings-header,
body .card-title,
body .section-title,
body .modal-title {
    font-family: var(--title-font);
    font-weight: 500;
    /* Flex sits marginally wider than the old face at the same size; pulling
       the tracking in by a hair keeps existing headings on the same line
       count instead of wrapping a word onto its own row. */
    letter-spacing: -0.01em;
}

/* The small uppercase labels carry their own positive tracking, which the rule
   above would otherwise cancel — and at 500 they need it more, not less, since
   uppercase at a mid weight reads tighter than it measures. */
body .st-card-title,
body .st-kpi-label,
body .app-settings-header {
    letter-spacing: 0.06em;
}