@font-face {
  font-family: 'SF Pro';
  src: url('../../fonts/SFPro/SF-Pro-Text-Regular.otf') format('opentype');
  font-weight: 400;
  font-style: normal;
}
@font-face {
  font-family: 'SF Pro';
  src: url('../../fonts/SFPro/SF-Pro-Text-Medium.otf') format('opentype');
  font-weight: 500;
  font-style: normal;
}
@font-face {
  font-family: 'SF Pro';
  src: url('../../fonts/SFPro/SF-Pro-Text-Semibold.otf') format('opentype');
  font-weight: 600;
  font-style: normal;
}
@font-face {
  font-family: 'SF Pro';
  src: url('../../fonts/SFPro/SF-Pro-Text-Bold.otf') format('opentype');
  font-weight: 700;
  font-style: normal;
}
@font-face {
  font-family: 'SF Pro';
  src: url('../../fonts/SFPro/SF-Pro-Text-Black.otf') format('opentype');
  font-weight: 800;
  font-style: normal;
}

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* ============================================
   Typography System
   Based on Figma design system
   ============================================ */

:root {
  /* Font Families */
  --font-family-headings: 'FuturaNDforNike365Cn-XBd', sans-serif;
  --font-family-headings-bold: 'TradeGothicLTPro-Bold', sans-serif;
  --font-family-body: 'SF Pro', sans-serif;

  /* ============================================
     HEADINGS - Futura ND for Nike 365 Cn
     Mobile sizes (base)
     ============================================ */

  /* H1 */
  --font-size-h1: 2.125rem; /* 34px */
  --font-line-height-h1: 1; /* 34px */

  /* H2 */
  --font-size-h2: 1.625rem; /* 26px */
  --font-line-height-h2: 1; /* 26px */

  /* H3 */
  --font-size-h3: 1.5rem; /* 24px */
  --font-line-height-h3: 1.21; /* 29.04px */

  /* H4 */
  --font-size-h4: 1.25rem; /* 20px */
  --font-line-height-h4: 1.1; /* 22px */

  /* H5 */
  --font-size-h5: 1.1875rem; /* 19px */
  --font-line-height-h5: 1.1; /* 20.9px */

  /* H6 */
  --font-size-h6: 1rem; /* 16px */
  --font-line-height-h6: 1.1; /* 17.6px */

  /* ============================================
     SUBTITLES - SF Pro
     Mobile sizes (base)
     ============================================ */

  /* Subtitle L */
  --font-size-subtitle-l: 1.5rem; /* 24px */
  --font-line-height-subtitle-l: 1.875; /* 45px */

  /* Subtitle M */
  --font-size-subtitle-m: 1.25rem; /* 20px */
  --font-line-height-subtitle-m: 1.95; /* 39px */

  /* Subtitle S */
  --font-size-subtitle-s: 1.125rem; /* 18px */
  --font-line-height-subtitle-s: 1.4; /* 25.2px */

  /* ============================================
     BODY TEXT - SF Pro
     Mobile sizes (base)
     ============================================ */

  /* Body L */
  --font-size-body-l: 1.0625rem; /* 17px */
  --font-line-height-body-l: 1.6; /* 27.2px */

  /* Body M */
  --font-size-body-m: 1rem; /* 16px */
  --font-line-height-body-m: 1.75; /* 28px */

  /* Body S */
  --font-size-body-s: 0.9375rem; /* 15px */
  --font-line-height-body-s: 1.467; /* 22px */

  /* ============================================
     CAPTIONS - SF Pro
     Mobile sizes (base)
     ============================================ */

  /* Caption */
  --font-size-caption: 0.8125rem; /* 13px */
  --font-line-height-caption: 1.538; /* 20px */

  /* Overline */
  --font-size-overline: 0.75rem; /* 12px */
  --font-line-height-overline: 1.333; /* 16px */
}

/* ============================================
   TABLET BREAKPOINT (768px and up)
   ============================================ */
@media screen and (min-width: 768px) {
  :root {
    /* HEADINGS */
    --font-size-h1: 3rem; /* 48px */
    --font-line-height-h1: 1; /* 48px */

    --font-size-h2: 1.8rem; /* 28.8px */
    --font-line-height-h2: 1; /* 28.8px */

    --font-size-h3: 1.65rem; /* 26.4px */
    --font-line-height-h3: 1.1; /* 29.04px */

    --font-size-h4: 1.375rem; /* 22px */
    --font-line-height-h4: 1.1; /* 24.2px */

    --font-size-h5: 1.1875rem; /* 19px */
    --font-line-height-h5: 1.1; /* 20.9px */

    --font-size-h6: 1rem; /* 16px */
    --font-line-height-h6: 1.1; /* 17.6px */

    /* SUBTITLES */
    --font-size-subtitle-l: 1.75rem; /* 28px */
    --font-line-height-subtitle-l: 1.607; /* 45px */

    --font-size-subtitle-m: 1.5rem; /* 24px */
    --font-line-height-subtitle-m: 1.625; /* 39px */

    --font-size-subtitle-s: 1.3125rem; /* 21px */
    --font-line-height-subtitle-s: 1.4; /* 29.4px */

    /* BODY TEXT */
    --font-size-body-l: 1.125rem; /* 18px */
    --font-line-height-body-l: 1.6; /* 28.8px */

    --font-size-body-m: 1rem; /* 16px */
    --font-line-height-body-m: 1.75; /* 28px */

    --font-size-body-s: 1rem; /* 16px */
    --font-line-height-body-s: 1.375; /* 22px */

    /* CAPTIONS */
    --font-size-caption: 0.875rem; /* 14px */
    --font-line-height-caption: 1.429; /* 20px */

    --font-size-overline: 0.75rem; /* 12px */
    --font-line-height-overline: 1.333; /* 16px */
  }
}

/* ============================================
   DESKTOP BREAKPOINT (1400px and up)
   ============================================ */
@media screen and (min-width: 1280px) {
  :root {
    /* HEADINGS - Desktop (full Figma sizes) */
    --font-size-h1: 3.8rem; /* 60.8px */
    --font-line-height-h1: 1; /* 60.8px */

    --font-size-h2: 2.6rem; /* 41.6px */
    --font-line-height-h2: 1; /* 41.6px */

    --font-size-h3: 2rem; /* 32px */
    --font-line-height-h3: 1.1; /* 35.2px */

    --font-size-h4: 1.6rem; /* 25.6px */
    --font-line-height-h4: 1.1; /* 28.16px */

    --font-size-h5: 1.4rem; /* 22.4px */
    --font-line-height-h5: 1.1; /* 24.64px */

    --font-size-h6: 1.2rem; /* 19.2px */
    --font-line-height-h6: 1.1; /* 21.12px */

    /* SUBTITLES - Desktop */
    --font-size-subtitle-l: 2rem; /* 32px */
    --font-line-height-subtitle-l: 1.406; /* 45px */

    --font-size-subtitle-m: 1.75rem; /* 28px */
    --font-line-height-subtitle-m: 1.393; /* 39px */

    --font-size-subtitle-s: 1.5rem; /* 24px */
    --font-line-height-subtitle-s: 1.4; /* 33.6px */

    /* BODY TEXT - Desktop */
    --font-size-body-l: 1.25rem; /* 20px */
    --font-line-height-body-l: 1.6; /* 32px */

    --font-size-body-m: 1.125rem; /* 18px */
    --font-line-height-body-m: 1.556; /* 28px */

    --font-size-body-s: 1rem; /* 16px */
    --font-line-height-body-s: 1.375; /* 22px */

    /* CAPTIONS - Desktop */
    --font-size-caption: 0.875rem; /* 14px */
    --font-line-height-caption: 1.429; /* 20px */

    --font-size-overline: 0.75rem; /* 12px */
    --font-line-height-overline: 1.333; /* 16px */
  }
}

/* ============================================
   UTILITY CLASSES
   Names match Figma typography system
   ============================================ */

html body .capsize {
  text-box: trim-both cap alphabetic;
}

/* ============================================
   HEADINGS - Futura ND for Nike 365 Cn
   ============================================ */

html body .heading-h1 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h1);
  line-height: var(--font-line-height-h1);
  letter-spacing: 0.125rem; /* 2px */
}

html body .heading-h2 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h2);
  line-height: var(--font-line-height-h2);
  letter-spacing: 0.125rem; /* 2px */
}

html body .heading-h3 {
  font-family: var(--font-family-headings);
  font-size: var(--font-size-h3);
  line-height: var(--font-line-height-h3);
  letter-spacing: 0.125rem; /* 2px */
}

html body .heading-h4 {
  font-family: var(--font-family-headings-bold);
  font-size: var(--font-size-h4);
  line-height: var(--font-line-height-h4);
  letter-spacing: 0;
}

html body .heading-h5 {
  font-family: var(--font-family-headings-bold);
  font-size: var(--font-size-h5);
  line-height: var(--font-line-height-h5);
  letter-spacing: 0;
}

html body .heading-h6 {
  font-family: var(--font-family-headings-bold);
  font-size: var(--font-size-h6);
  line-height: var(--font-line-height-h6);
  letter-spacing: 0;
}

/* ============================================
   SUBTITLES - SF Pro
   ============================================ */

html body .subtitle-l {
  font-family: var(--font-family-body);
  font-size: var(--font-size-subtitle-l);
  line-height: var(--font-line-height-subtitle-l);
  letter-spacing: 0;
}

html body .subtitle-m {
  font-family: var(--font-family-body);
  font-size: var(--font-size-subtitle-m);
  line-height: var(--font-line-height-subtitle-m);
  letter-spacing: 0;
}

html body .subtitle-s {
  font-family: var(--font-family-body);
  font-size: var(--font-size-subtitle-s);
  line-height: var(--font-line-height-subtitle-s);
  letter-spacing: 0;
}

/* ============================================
   BODY TEXT - SF Pro
   ============================================ */

html body .body-l {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-l);
  line-height: var(--font-line-height-body-l);
  letter-spacing: 0;
}

html body .body-m {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-m);
  line-height: var(--font-line-height-body-m);
  letter-spacing: 0;
}

html body .body-s {
  font-family: var(--font-family-body);
  font-size: var(--font-size-body-s);
  line-height: var(--font-line-height-body-s);
  letter-spacing: 0;
}

/* ============================================
   CAPTIONS - SF Pro
   ============================================ */

html body .caption {
  font-family: var(--font-family-body);
  font-size: var(--font-size-caption);
  line-height: var(--font-line-height-caption);
  letter-spacing: 0;
}

html body .overline {
  font-family: var(--font-family-body);
  font-size: var(--font-size-overline);
  line-height: var(--font-line-height-overline);
  letter-spacing: 0.03125rem; /* 0.5px */
}

/* ============================================
   FONT WEIGHT UTILITIES
   ============================================ */

html body .font-light {
  font-weight: 300;
}

html body .font-regular {
  font-weight: 400;
}

html body .font-medium {
  font-weight: 500;
}

html body .font-bold {
  font-weight: 700;
}

html body .font-xbold {
  font-weight: 800;
}

html body .font-black {
  font-weight: 900;
}