@import url("https://use.typekit.net/qlm1aao.css");

:root {
  // Colors
  /* Brand */
  --tb-brand-primary-300: #a6192e;
  --tb-brand-primary-400: #bb271a;
  --tb-brand-primary-500: #cc0000;
  --tb-brand-primary-600: #e03a3e;
  --tb-brand-secondary: #f00;

  // Fonts
  --tb-font-primary: var(--tb-font-beachwood);
  --tb-font-secondary: var(--tb-font-roboto);
  --tb-font-tertiary: var(--tb-font-trade-gothic);

  --tb-font-beachwood: "beachwood-variable", sans-serif;
  --tb-font-trade-gothic: "trade-gothic-next", sans-serif;
  --tb-font-roboto: "roboto", sans-serif;
  --tb-font-robotoCond: "robotoCondensed", sans-serif;
  /* --tb-font-unitedSans: "unitedSans", sans-serif; */
  --tb-font-ripcity: "ripcity", sans-serif;
  --tb-font-nba: "nba", sans-serif;

  // Border Radius
  --tb-rounded-xs: 4px;
  --tb-rounded-sm: 6px;
  --tb-rounded-md: 8px;
  --tb-rounded-lg: 16px;

  // Shadow
  --tb-shadow-sm: 0 1px 0 rgb(0 0 0 / 2%), 0 4px 8px rgb(0 0 0 / 4%);
  --tb-shadow-smd: 0px 0px 10px rgb(50 50 93 / 5%),
    0px 6px 12px -2px rgb(50 50 93 / 5%), 0px 3px 7px -3px rgb(50 50 93 / 10%);
  --tb-shadow-smd: 0 0 10px 0 rgb(0 0 0 / 5%);
  --tb-shadow-md: 0 0 10px 0 rgb(0 0 0 / 5%);
  --tb-shadow-lg: 0px 10px 20px -5px rgb(0 0 0 / 15%);
  --tb-shadow-xl: rgb(50 50 93 / 7%) 0 1px 1px, rgb(50 50 93 / 7%) 0 2px 2px,
    rgb(50 50 93 / 7%) 0 4px 4px, rgb(50 50 93 / 7%) 0 8px 8px,
    rgb(50 50 93 / 12%) 0 16px 16px;

  --rc-color-light-100: #ffffff;
  --rc-color-light-200: #f5f5f5;
  --rc-color-light-300: #f1f1f1;
  --rc-color-light-400: #ebebeb;
  --rc-color-light-500: #eaeaea;
  --rc-color-light-600: #e2e2e2;
  --rc-color-light-700: #dbdbdb;
  --rc-color-light-800: #dadada;
  --rc-color-light-900: #d6d6d6;
  --rc-color-light-1000: #bfbfbf;
  --rc-color-light-1100: #b5b5b5;
  --rc-color-dark-100: #121212;
  --rc-color-dark-200: #191919;
  --rc-color-dark-300: #1b1b1b;
  --rc-color-dark-400: #252525;
  --rc-color-dark-500: #262626;
  --rc-color-dark-600: #2a2a2a;
  --rc-color-dark-700: #2f2f2f;
  --rc-color-dark-800: #323232;
  --rc-color-dark-900: #3a3a3a;
  --rc-color-dark-1000: #414141;
  --rc-color-dark-1100: #737373;

  --rc-ui-color-background: light-dark(
    var(--rc-color-light-200),
    var(--rc-color-dark-100)
  );
  --rc-ui-color-sideground: light-dark(
    var(--rc-color-light-300),
    var(--rc-color-dark-200)
  );
  --rc-ui-color-focus: light-dark(
    var(--rc-color-light-500),
    var(--rc-color-dark-400)
  );
  --rc-ui-color-active: light-dark(
    var(--rc-color-light-800),
    var(--rc-color-dark-700)
  );
  --rc-ui-color-card: light-dark(
    var(--rc-color-light-100),
    var(--rc-color-dark-200)
  );
  --rc-ui-color-border: light-dark(
    var(--rc-color-light-600),
    var(--rc-color-dark-500)
  );
  --rc-ui-color-border-active: light-dark(
    var(--rc-color-light-700),
    var(--rc-color-dark-800)
  );
  --rc-ui-color-label: light-dark(
    var(--rc-color-dark-1100),
    var(--rc-color-light-1100)
  );
  --rc-ui-color-subheader: light-dark(
    var(--rc-color-dark-1000),
    var(--rc-color-light-1000)
  );
  --rc-ui-color-body: light-dark(
    var(--rc-color-dark-500),
    var(--rc-color-light-900)
  );
  --rc-ui-color-heading: light-dark(
    var(--rc-color-dark-300),
    var(--rc-color-light-400)
  );
}

/****** FONTS ******/
/* Roboto */
@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 100;
  src: url("./fonts/roboto/roboto-v50-latin-100.woff2") format("woff2");
}
@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/roboto/roboto-v50-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/roboto/roboto-v50-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/roboto/roboto-v50-latin-500.woff2") format("woff2");
}
@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/roboto/roboto-v50-latin-700.woff2") format("woff2");
}
@font-face {
  font-family: "roboto";
  font-style: normal;
  font-weight: 900;
  src: url("./fonts/roboto/roboto-v50-latin-900.woff2") format("woff2");
}

/* Roboto Condensed */
@font-face {
  font-family: "robotoCondensed";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/robotoCondensed/roboto-condensed-v31-latin-300.woff2") format("woff2");
}
@font-face {
  font-family: "robotoCondensed";
  font-style: normal;
  font-weight: 400;
  src: url("./fonts/robotoCondensed/roboto-condensed-v31-latin-regular.woff2") format("woff2");
}
@font-face {
  font-family: "robotoCondensed";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/robotoCondensed/roboto-condensed-v31-latin-700.woff2") format("woff2");
}

/* United Sans */
/* @font-face {
  font-family: "unitedSans";
  font-style: normal;
  font-weight: 300;
  src:
    url("./fonts/unitedSans/unitedsanscond-light-webfont.woff2") format("woff2"),
    url("./fonts/unitedSans/unitedsanscond-light-webfont.woff") format("woff");
}
@font-face {
  font-family: "unitedSans";
  font-style: normal;
  font-weight: 500;
  src:
    url("./fonts/unitedSans/unitedsanscond-medium-webfont.woff2") format("woff2"),
    url("./fonts/unitedSans/unitedsanscond-medium-webfont.woff") format("woff");
}
@font-face {
  font-family: "unitedSans";
  font-style: normal;
  font-weight: 700;
  src:
    url("./fonts/unitedSans/unitedsanscond-bold-webfont.woff2") format("woff2"),
    url("./fonts/unitedSans/unitedsanscond-bold-webfont.woff") format("woff");
}
@font-face {
  font-family: "unitedSans";
  font-style: normal;
  font-weight: 800;
  src:
    url("./fonts/unitedSans/unitedsanscond-heavy-webfont.woff2") format("woff2"),
    url("./fonts/unitedSans/unitedsanscond-heavy-webfont.woff") format("woff");
}
@font-face {
  font-family: "unitedSans";
  font-style: normal;
  font-weight: 900;
  src:
    url("./fonts/unitedSans/unitedsanscond-black-webfont.woff2") format("woff2"),
    url("./fonts/unitedSans/unitedsanscond-black-webfont.woff") format("woff");
} */

/* Ripcity */
@font-face {
  font-family: "ripcity";
  font-style: normal;
  font-weight: 400;
  src:
    url("./fonts/ripcity/ripcity_font-webfont.woff2") format("woff2"),
    url("./fonts/ripcity/ripcity_font-webfont.woff") format("woff");
}

/* NBA */
@font-face {
  font-family: "nba";
  font-style: normal;
  font-weight: 300;
  src: url("./fonts/actionNba/actionNBA-Light.woff2") format("woff2");
}
@font-face {
  font-family: "nba";
  font-style: normal;
  font-weight: 500;
  src: url("./fonts/actionNba/actionNBA-Medium.woff2") format("woff2");
}
@font-face {
  font-family: "nba";
  font-style: normal;
  font-weight: 700;
  src: url("./fonts/actionNba/actionNBA-Bold.woff2") format("woff2");
}