/* ==========================================================================
   TRACKFLOWS — TYPOGRAPHY (single source of truth)
   --------------------------------------------------------------------------
   This is the ONLY place fonts are declared on the site.

   How it works
   ------------
   1. @font-face blocks below load Google's "Exo" family (self-hosted under
      /fonts/Exo, no external CDN — works offline / behind firewalls).
   2. Two CSS variables expose the font to the rest of the codebase:
        --font-head   →  used by every <h1..h6>, page titles, hero text
        --font-body   →  used by paragraphs, tables, inputs, buttons, etc.
      Every stylesheet on the site reads via `font-family: var(--font-head)`
      or `var(--font-body)` — never a hard-coded family name.

   Switching fonts in the future
   -----------------------------
   Want to change just the headers? Edit ONE line — `--font-head` below.
   Want to change just the body? Edit ONE line — `--font-body` below.
   The change ripples site-wide automatically.

   The two variables are declared in the same :root block, but kept on
   separate lines on purpose so future edits never touch each other.
   ========================================================================== */

/* ---------- @font-face : Exo (Google Fonts, OFL) ---------- */
@font-face {
    font-family: 'Exo';
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Exo/Exo-VariableFont_wght.ttf') format('truetype-variations'),
         url('/fonts/Exo/Exo-VariableFont_wght.ttf') format('truetype');
}
@font-face {
    font-family: 'Exo';
    font-style: italic;
    font-weight: 100 900;
    font-display: swap;
    src: url('/fonts/Exo/Exo-Italic-VariableFont_wght.ttf') format('truetype-variations'),
         url('/fonts/Exo/Exo-Italic-VariableFont_wght.ttf') format('truetype');
}

/* Static fallbacks (older browsers without variable-font support) */
@font-face { font-family: 'Exo'; font-style: normal; font-weight: 300; font-display: swap;
             src: url('/fonts/Exo/Exo-Light.ttf')     format('truetype'); }
@font-face { font-family: 'Exo'; font-style: normal; font-weight: 400; font-display: swap;
             src: url('/fonts/Exo/Exo-Regular.ttf')   format('truetype'); }
@font-face { font-family: 'Exo'; font-style: normal; font-weight: 500; font-display: swap;
             src: url('/fonts/Exo/Exo-Medium.ttf')    format('truetype'); }
@font-face { font-family: 'Exo'; font-style: normal; font-weight: 600; font-display: swap;
             src: url('/fonts/Exo/Exo-SemiBold.ttf')  format('truetype'); }
@font-face { font-family: 'Exo'; font-style: normal; font-weight: 700; font-display: swap;
             src: url('/fonts/Exo/Exo-Bold.ttf')      format('truetype'); }
@font-face { font-family: 'Exo'; font-style: normal; font-weight: 800; font-display: swap;
             src: url('/fonts/Exo/Exo-ExtraBold.ttf') format('truetype'); }
@font-face { font-family: 'Exo'; font-style: normal; font-weight: 900; font-display: swap;
             src: url('/fonts/Exo/Exo-Black.ttf')     format('truetype'); }
@font-face { font-family: 'Exo'; font-style: italic; font-weight: 400; font-display: swap;
             src: url('/fonts/Exo/Exo-Italic.ttf')    format('truetype'); }


/* ---------- TOKENS — change ONE line to swap the entire site ---------- */
:root {
    /* HEADER FONT — used by h1..h6, page titles, hero headings.
       Change this to swap headings only (body untouched).             */
    --font-head: 'Exo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

    /* BODY FONT — used by paragraphs, tables, inputs, buttons, etc.
       Change this to swap body text only (headings untouched).        */
    --font-body: 'Exo', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* ---------- HARD DEFAULTS so every element honours the tokens ---------- */
html, body, input, select, textarea, button {
    font-family: var(--font-body);
    font-feature-settings: "kern" 1, "liga" 1, "calt" 1;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, h5, h6,
.page-title, .hero-title, .display, .display-1, .display-2, .display-3,
.display-4, .display-5, .display-6 {
    font-family: var(--font-head);
}