/**
 * Font Declarations
 * SF Pro Display font family
 * Using system font stack as fallback
 * Reference: @new-docs/analysis/06-design-tokens.md
 */

/* =============================================
 * SYSTEM FONT STACK
 * ============================================= */

/*
  SF Pro Display font stack with system fallbacks
  This ensures optimal font rendering across all platforms
  while waiting for actual font files to be provided
*/

:root {
  --font-primary:
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Display",
    "Segoe UI",
    Roboto,
    "Helvetica Neue",
    Arial,
    sans-serif;
}

/* =============================================
 * WEB FONTS (ACTIVE)
 * ============================================= */

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

/* SF Pro Display - Medium (500) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Medium.woff2') format('woff2'),
       url('../fonts/SFProDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* SF Pro Display - Bold (700) */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Bold.woff2') format('woff2'),
       url('../fonts/SFProDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* SF Pro Display - Black (900) - For Banner Headlines */
@font-face {
  font-family: 'SF Pro Display';
  src: url('../fonts/SFProDisplay-Black.woff2') format('woff2'),
       url('../fonts/SFProDisplay-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* =============================================
 * FONT OPTIMIZATION
 * ============================================= */

/*
  Font rendering optimization for better performance
  and visual quality across browsers
*/

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}