/* Coinbase Text Font Family */

/* Extra Light */
@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Extra_Light-web-1.32.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Extra_Light_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Light-web-1.32.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Light_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Regular-web-1.32.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Regular_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Medium-web-1.32.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Medium_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Bold-web-1.32.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Text";
  src: url("/fonts/Coinbase-Text/Coinbase_Text-Bold_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Coinbase Display Font Family */

/* Extra Light */
@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Extra_Light-web-1.32.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Extra_Light_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Light-web-1.32.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Light_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Regular-web-1.32.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Regular_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Medium-web-1.32.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Medium_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Bold-web-1.32.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Display";
  src: url("/fonts/Coinbase-Display/Coinbase_Display-Bold_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Coinbase Sans Font Family */

/* Extra Light */
@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Extra_Light-web-1.32.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Extra_Light_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 200;
  font-style: italic;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Light-web-1.32.woff2")
    format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Light_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Regular-web-1.32.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Regular_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Medium-web-1.32.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Medium_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 500;
  font-style: italic;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Bold-web-1.32.woff2")
    format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Coinbase Sans";
  src: url("/fonts/Coinbase-Sans/Coinbase_Sans-Bold_Italic-web-1.32.woff2")
    format("woff2");
  font-weight: 700;
  font-style: italic;
  font-display: swap;
}

/* Coinbase Mono Font Family */

/* Extra Light */
@font-face {
  font-family: "Coinbase Mono";
  src: url("/fonts/Coinbase-Mono/Coinbase_Mono-Extra_Light-web.woff2")
    format("woff2");
  font-weight: 200;
  font-style: normal;
  font-display: swap;
}

/* Light */
@font-face {
  font-family: "Coinbase Mono";
  src: url("/fonts/Coinbase-Mono/Coinbase_Mono-Light-web.woff2") format("woff2");
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

/* Regular */
@font-face {
  font-family: "Coinbase Mono";
  src: url("/fonts/Coinbase-Mono/Coinbase_Mono-Regular-web.woff2")
    format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* Medium */
@font-face {
  font-family: "Coinbase Mono";
  src: url("/fonts/Coinbase-Mono/Coinbase_Mono-Medium-web.woff2")
    format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* Bold */
@font-face {
  font-family: "Coinbase Mono";
  src: url("/fonts/Coinbase-Mono/Coinbase_Mono-Bold-web.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* CSS Variables for easy access to font families */
:root {
  --font-text:
    "Coinbase Text", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-display:
    "Coinbase Display", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-sans:
    "Coinbase Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  --font-mono:
    "Coinbase Mono", ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas,
    "Liberation Mono", "Courier New", monospace;
}
