/**
 * Centralized Font Management
 * ─────────────────────────────────────────────────────────────
 * Single source of truth for all font stacks in the application.
 * Uses CSS custom properties so every component inherits the same
 * cross-platform system font stack via var(--font-system-*).
 *
 * Stack priority (Apple-first):
 *   1. -apple-system / BlinkMacSystemFont  -> SF Pro on Apple devices (primary)
 *   2. "SF Pro Display" / "SF Pro Text"    -> Named hint (resolves only on macOS)
 *   3. "Inter"                             -> Cross-platform variable font fallback
 *   4. "Segoe UI"                          -> Windows system font
 *   5. Roboto                              -> Android / ChromeOS / Linux
 *   6. Helvetica, Arial                    -> Legacy fallbacks
 *   7. sans-serif                          -> Generic keyword (MUST be unquoted)
 *
 * SF Pro Integration Hook:
 *   If you have licensed SF Pro font files, uncomment the @font-face
 *   block below AND drop files into web/fonts/sf-pro/.
 *   See web/fonts/sf-pro/README.md for full instructions.
 */

/* ============================================
   SF PRO @font-face — UNCOMMENT WHEN LICENSED FILES ARE ADDED
   See web/fonts/sf-pro/README.md for instructions.
   ============================================ */

/*
@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/sf-pro/SF-Pro-Display-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/sf-pro/SF-Pro-Display-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/sf-pro/SF-Pro-Display-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Display";
  src: url("/fonts/sf-pro/SF-Pro-Display-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("/fonts/sf-pro/SF-Pro-Text-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("/fonts/sf-pro/SF-Pro-Text-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("/fonts/sf-pro/SF-Pro-Text-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "SF Pro Text";
  src: url("/fonts/sf-pro/SF-Pro-Text-Bold.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
*/

/* ============================================
   INTER VARIABLE FONT @font-face
   ============================================
   Inter is a variable font (axes: opsz, wght) that works across
   all browsers and platforms. WOFF2 is preferred (~40 % smaller than
   TTF); the .ttf fallback uses the user-supplied file for older
   browsers that may not support WOFF2.
   ============================================ */

@font-face {
  font-family: "Inter";
  /* Using the repository WOFF2 file (InterVariable.woff2). If you later add
     a TTF fallback, add it to the src list after the WOFF2 entry. */
  src: url("/fonts/inter/InterVariable.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-stretch: 75% 125%;
  font-display: swap;
}

/* ============================================
   FONT CUSTOM PROPERTIES
   ============================================ */

:root {
  /* General-purpose system font stack (display + text combined).
     Apple system keywords resolve to SF Pro on macOS/iOS, so they
     appear first.  Inter serves as the cross-platform fallback for
     Windows, Linux, and any environment without a system font. */
  --font-system: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Display variant — headings, titles, large UI chrome */
  --font-system-display: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  /* Text variant — body copy, small UI labels, menu items */
  --font-system-text: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Inter", "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}