/* ============================================
   Self-Hosted Fonts - StoicKnight Site (Precision Design System)
   
   Description:
     Contains @font-face declarations for variable fonts.
     Using variable fonts reduces HTTP requests and provides
     smoother weight transitions.
   
   How it works:
     1. Browser requests this CSS file
     2. @font-face rules point to woff2 files
     3. Fonts load with font-display: swap (shows fallback until loaded)
   
   Why variable fonts:
     - Single file for multiple weights (400, 500, 600, etc.)
     - Better performance than multiple font files
     - More precise weight control
   
   Available fonts (Precision Design System):
     - 'Manrope': Headlines (variable 200-800)
     - 'Inter': Body and UI labels (variable 100-900)
     - 'Space Grotesk': Unused (kept for potential future use)
   
   Related files:
      - assets/css/input.css: References these font families via @theme block
      - layouts/partials/head.html: Loads this file
   
    Note: Material Symbols is now self-hosted (subsetted to ~27 icons)
    ============================================ */

/* Space Grotesk - Headlines (Variable Font: 300-700) */
@font-face {
  font-family: 'Space Grotesk';
  font-style: normal;
  font-weight: 300 700;
  font-display: swap;
  src: url('/fonts/space-grotesk-v16-latin-500.woff2') format('woff2');
}

/* Manrope - Body Text (Variable Font: 200-800) */
@font-face {
  font-family: 'Manrope';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('/fonts/manrope-variable.woff2') format('woff2');
}

/* Inter - Labels/UI (Variable Font: 100-900) */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-variable.woff2') format('woff2');
}

/* Note: Material Symbols font removed — site now uses inline SVG icons */
/* See layouts/partials/icon.html and layouts/partials/icons/ for the modular icon system */