/* ==========================================================================
   SF Pro Complete Web Font Family
   Includes: SF Pro Display (100 - 900, normal & italic)
             SF Pro Text (100 - 900)
             SF Pro Expanded (all weights + expanded width)
             SF Pro Rounded
   ========================================================================== */

/* ─── SF Pro Variable / Expanded ────────────────────────────────────────── */
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded'),
       local('SF Pro Display Expanded'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype-variations'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: 110% 150%;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 100 900;
  font-stretch: expanded;
  font-style: normal;
  font-display: swap;
}

/* SF Pro Expanded Specific Weights */
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Ultralight'), local('SF Pro Expanded Thin'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 100;
  font-stretch: expanded;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Thin'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 200;
  font-stretch: expanded;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Light'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 300;
  font-stretch: expanded;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Regular'), local('SF Pro Expanded'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 400;
  font-stretch: expanded;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Medium'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 500;
  font-stretch: expanded;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Semibold'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 600;
  font-stretch: expanded;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Bold'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 700;
  font-stretch: expanded;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Heavy'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 800;
  font-stretch: expanded;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Expanded';
  src: local('SF Pro Expanded Black'),
       url('https://cdn.jsdelivr.net/gh/ravijoon/SF-Pro-Expanded-Font@main/SF-Pro.ttf') format('truetype');
  font-weight: 900;
  font-stretch: expanded;
  font-display: swap;
}

/* ─── SF Pro Display (All 9 weights: normal + italic) ──────────────────── */
/* 100 Ultralight */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Ultralight'), local('SF Pro Display-Ultralight'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Ultralight.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Ultralight.woff') format('woff');
  font-weight: 100;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Ultralight Italic'), local('SF Pro Display-UltralightItalic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-UltralightItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-UltralightItalic.woff') format('woff');
  font-weight: 100;
  font-style: italic;
  font-display: swap;
}

/* 200 Thin */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Thin'), local('SF Pro Display-Thin'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Thin.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Thin.woff') format('woff');
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Thin Italic'), local('SF Pro Display-ThinItalic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-ThinItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-ThinItalic.woff') format('woff');
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* 300 Light */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Light'), local('SF Pro Display-Light'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Light.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Light.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Light Italic'), local('SF Pro Display-LightItalic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-LightItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-LightItalic.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* 400 Regular */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Regular'), local('SF Pro Display'), local('SF Pro'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Regular.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Regular Italic'), local('SF Pro Display-Italic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-RegularItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-RegularItalic.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* 500 Medium */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Medium'), local('SF Pro Display-Medium'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Medium.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Medium Italic'), local('SF Pro Display-MediumItalic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-MediumItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-MediumItalic.woff') format('woff');
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* 600 Semibold */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Semibold'), local('SF Pro Display-Semibold'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Semibold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Semibold.woff') format('woff');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Semibold Italic'), local('SF Pro Display-SemiboldItalic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-SemiboldItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-SemiboldItalic.woff') format('woff');
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}

/* 700 Bold */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Bold'), local('SF Pro Display-Bold'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Bold.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Bold Italic'), local('SF Pro Display-BoldItalic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-BoldItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-BoldItalic.woff') format('woff');
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* 800 Heavy */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Heavy'), local('SF Pro Display-Heavy'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Heavy.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Heavy.woff') format('woff');
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Heavy Italic'), local('SF Pro Display-HeavyItalic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-HeavyItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-HeavyItalic.woff') format('woff');
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}

/* 900 Black */
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Black'), local('SF Pro Display-Black'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Black.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Black.woff') format('woff');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Display';
  src: local('SF Pro Display Black Italic'), local('SF Pro Display-BlackItalic'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-BlackItalic.woff2') format('woff2'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-BlackItalic.woff') format('woff');
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}

/* ─── SF Pro Text (mapped for standard text sizes) ───────────────────────── */
@font-face {
  font-family: 'SF Pro Text';
  src: local('SF Pro Text Regular'), local('SF Pro Text'), local('SF Pro Display'), local('-apple-system'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: local('SF Pro Text Medium'), local('SF Pro Display Medium'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Medium.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: local('SF Pro Text Semibold'), local('SF Pro Display Semibold'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Semibold.woff2') format('woff2');
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'SF Pro Text';
  src: local('SF Pro Text Bold'), local('SF Pro Display Bold'),
       url('https://cdn.jsdelivr.net/npm/sf-font@1.0.0/SFProDisplay-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── Utility classes ────────────────────────────────────────────────────── */
.font-sf {
  font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.font-sf-expanded {
  font-family: 'SF Pro Expanded', 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif !important;
  font-stretch: expanded !important;
  font-variation-settings: 'wdth' 125 !important;
}