/* WWE 26 theme tokens */

/*
///////////////////////////////////////////////////
// color (20 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-bg-primary: #131313;
  --av-bg-secondary: #000000;
  --av-bg-tertiary: #1f1f1f;
  --av-bg-elevated: #1f1f1f;
  --av-bg-hover: #1d1d1d;
  --av-bg-active: #292929;
  --av-elevated-border: #1f1f1f;
  --av-content-primary: #ffffff;
  --av-content-secondary: #cdcdcd;
  --av-content-tertiary: #919191;
  --av-accent-primary: #d02c1e;
  --av-accent-secondary: #d02c1e;
  --av-accent-tertiary: #d02c1e;
  --av-sentiment-negative-primary: #cb272f;
  --av-sentiment-negative-primary-hover: #b8232b;
  --av-sentiment-negative-primary-active: #a72027;
  --av-sentiment-negative-secondary: #fbeaea;
  --av-sentiment-negative-secondary-hover: #f9e1e1;
  --av-sentiment-negative-secondary-active: #f8d8d8;
  --av-focus-border: #cb272f;
}

/*
///////////////////////////////////////////////////
// typescale (97 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-disp-lg-font: RAW Sans;
  --av-disp-lg-weight: Regular;
  --av-disp-lg-font-size: 150px;
  --av-disp-lg-line-height: 150px;
  --av-disp-lg-letter-spacing: 0px;
  --av-disp-md-font: RAW Sans;
  --av-disp-md-weight: Regular;
  --av-disp-md-font-size: 72px;
  --av-disp-md-line-height: 60px;
  --av-disp-md-letter-spacing: 0px;
  --av-disp-sm-font: RAW Sans;
  --av-title-lg-font: Vanguard CF;
  --av-title-lg-weight: Demi Bold;
  --av-title-lg-font-size: 32px;
  --av-title-lg-line-height: 36px;
  --av-title-lg-letter-spacing: 0px;
  --av-title-md-font: Vanguard CF;
  --av-title-md-weight: Demi Bold;
  --av-title-md-font-size: 24px;
  --av-title-md-line-height: 32px;
  --av-title-md-letter-spacing: 0px;
  --av-title-sm-font: Vanguard CF;
  --av-title-sm-weight: Demi Bold;
  --av-title-sm-font-size: 14px;
  --av-title-sm-line-height: 16px;
  --av-title-sm-letter-spacing: 0px;
  --av-disp-sm-weight: Regular;
  --av-disp-sm-font-size: 58px;
  --av-disp-sm-line-height: 40px;
  --av-disp-sm-letter-spacing: 0px;
  --av-bd-lg-font: Roboto;
  --av-bd-lg-weight: Condensed Regular;
  --av-bd-lg-font-size: 16px;
  --av-bd-lg-line-height: 24px;
  --av-bd-lg-letter-spacing: 0.2px;
  --av-bd-lg-paragraph-spacing: 8px;
  --av-bd-lg-em-font: Roboto;
  --av-bd-lg-em-weight: Condensed Bold;
  --av-bd-lg-em-font-size: 16px;
  --av-bd-lg-em-line-height: 24px;
  --av-bd-lg-em-letter-spacing: 0.2px;
  --av-bd-lg-em-paragraph-spacing: 8px;
  --av-bd-def-font: Roboto;
  --av-bd-def-em-font: Roboto;
  --av-bd-def-em-weight: Condensed Bold;
  --av-bd-def-em-font-size: 14px;
  --av-bd-def-em-line-height: 22px;
  --av-bd-def-em-letter-spacing: 0px;
  --av-bd-def-em-paragraph-spacing: 0px;
  --av-bd-def-weight: Condensed Regular;
  --av-bd-def-font-size: 14px;
  --av-bd-def-line-height: 22px;
  --av-bd-def-letter-spacing: 0px;
  --av-bd-def-paragraph-spacing: 0px;
  --av-bd-sm-font: Roboto;
  --av-bd-sm-weight: Condensed Regular;
  --av-bd-sm-font-size: 12px;
  --av-bd-sm-line-height: 16px;
  --av-bd-sm-letter-spacing: -0.2px;
  --av-bd-sm-paragraph-spacing: 8px;
  --av-bd-sm-em-font: Roboto;
  --av-label-lg-font: Vanguard CF;
  --av-label-lg-weight: Demi Bold;
  --av-label-lg-font-size: 24px;
  --av-label-lg-line-height: 24px;
  --av-label-lg-letter-spacing: -0.2px;
  --av-label-lg-top-padding: 0px;
  --av-label-lg-bottom-padding: 0px;
  --av-label-def-font: Vanguard CF;
  --av-label-sm-font: Vanguard CF;
  --av-label-sm-weight: Demi Bold;
  --av-label-sm-font-size: 20px;
  --av-label-sm-line-height: 22px;
  --av-label-sm-letter-spacing: -0.2px;
  --av-label-def-weight: Demi Bold;
  --av-label-sm-top-padding: 0px;
  --av-label-sm-bottom-padding: 0px;
  --av-label-def-font-size: 24px;
  --av-label-def-line-height: 24px;
  --av-label-def-letter-spacing: -0.2px;
  --av-textfield-em-font: Roboto;
  --av-textfield-em-weight: Condensed Bold;
  --av-textfield-em-font-size: 16px;
  --av-textfield-em-line-height: 20px;
  --av-textfield-em-letter-spacing: -0.2px;
  --av-textfield-font: Roboto;
  --av-textfield-weight: Condensed Regular;
  --av-textfield-font-size: 16px;
  --av-textfield-line-height: 20px;
  --av-textfield-letter-spacing: -0.2px;
  --av-bd-sm-em-weight: Condensed Bold;
  --av-bd-sm-em-font-size: 12px;
  --av-bd-sm-em-line-height: 16px;
  --av-bd-sm-em-letter-spacing: -0.2px;
  --av-bd-sm-em-paragraph-spacing: 8px;
  --av-label-def-top-padding: 0px;
  --av-label-def-bottom-padding: 0px;
}

/*
///////////////////////////////////////////////////
// component / badge (16 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-bdg-primary-padding-top: 4px;
  --av-bdg-primary-padding-bottom: 10px;
  --av-bdg-primary-padding-sides: 14px;
  --av-bdg-primary-radius: 2px;
  --av-bdg-primary-border-thickness: 1px;
  --av-bdg-primary-label: #ffffff;
  --av-bdg-primary-border: #c0c0c0;
  --av-bdg-primary-bg: #9f0707;
  --av-bdg-secondary-padding-top: 6px;
  --av-bdg-secondary-padding-bottom: 6px;
  --av-bdg-secondary-padding-sides: 12px;
  --av-bdg-secondary-radius: 4px;
  --av-bdg-secondary-border-thickness: 1px;
  --av-bdg-secondary-label: #f4f4f4;
  --av-bdg-secondary-border: #626262;
  --av-bdg-secondary-bg: rgba(239, 238, 233, 0);
}

/*
///////////////////////////////////////////////////
// component / chip (15 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-chip-padding-top: 6px;
  --av-chip-padding-bottom: 10px;
  --av-chip-padding-sides: 32px;
  --av-chip-radius: 8px;
  --av-chip-border-thickness: 2px;
  --av-chip-label: #ffffff;
  --av-chip-label-hover: #ffffff;
  --av-chip-label-selected: #d02c1e;
  --av-chip-border: #848484;
  --av-chip-border-hover: #ffffff;
  --av-chip-border-selected: #d02c1e;
  --av-chip-bg: rgba(239, 238, 233, 0);
  --av-chip-bg-hover: rgba(0, 0, 0, 0.1);
  --av-chip-bg-selected: rgba(203, 43, 30, 0);
  --av-chip-shadow-selected: #ff685b;
}

/*
///////////////////////////////////////////////////
// component / player ratings (12 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-player-list-radius: 8px;
  --av-player-table-radius: 12px;
  --av-player-item-label: #ffffff;
  --av-player-item-label-hover: #ffffff;
  --av-player-item-active: #ffffff;
  --av-player-item-bg: rgba(0, 0, 0, 0.68);
  --av-player-item-bg-hover: rgba(51, 51, 51, 0.9);
  --av-player-item-bg-active: rgba(51, 51, 51, 0.8);
  --av-player-border: rgba(255, 255, 255, 0.5);
  --av-player-table-bg: rgba(0, 0, 0, 0.5);
  --av-player-table-header: #d02c1e;
  --av-player-item-fade: rgba(74, 74, 74, 0.32);
}

/*
///////////////////////////////////////////////////
// component / button (19 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-btn-radius: 2px;
  --av-icon-btn-radius: 2px;
  --av-btn-primary-bg: #cb272f;
  --av-btn-primary-bg-hover: #9b2016;
  --av-btn-primary-bg-active: #941e14;
  --av-btn-primary-label: #ffffff;
  --av-btn-primary-border: #ffffff;
  --av-btn-primary-border-thickness: 0px;
  --av-btn-secondary-bg: #ffffff;
  --av-btn-secondary-bg-hover: #ffffff;
  --av-btn-secondary-bg-active: #ffffff;
  --av-btn-secondary-label: #000000;
  --av-btn-secondary-border: #ffffff;
  --av-btn-secondary-border-thickness: 2px;
  --av-btn-text-label: #ffffff;
  --av-btn-on-content: #ffffff;
  --av-btn-on-content-hover: #ffffff;
  --av-btn-on-content-active: #ffffff;
  --av-btn-on-content-label: #ffffff;
}

/*
///////////////////////////////////////////////////
// component / retail button (6 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-retail-btn-primary-bg: rgba(255, 255, 255, 0.1);
  --av-retail-btn-primary-bg-hover: rgba(255, 255, 255, 0.04);
  --av-retail-btn-primary-bg-active: rgba(255, 255, 255, 0.02);
  --av-retail-btn-primary-label: #ffffff;
  --av-retail-btn-primary-border: #4a4a4a;
  --av-retail-btn-primary-border-thickness: 1px;
}

/*
///////////////////////////////////////////////////
// component / input fields (6 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-input-radius: 12px;
  --av-input-border-thickness: 1px;
  --av-input-bg: #232323;
  --av-input-border: #606060;
  --av-input-border-hover: #ffffff;
  --av-input-border-active: #cb272f;
}

/*
///////////////////////////////////////////////////
// component / menu (2 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-menu-radius: 12px;
  --av-list-item-radius: 4px;
}

/*
///////////////////////////////////////////////////
// component / table (17 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-table-radius: 8px;
  --av-table-border-thickness: 1px;
  --av-cell-border-thickness: 1px;
  --av-cell-border: #363636;
  --av-table-border: #323232;
  --av-cell-heading-bg: #261b2d;
  --av-cell-heading-bg-hover: #331f40;
  --av-cell-heading-bg-active: #3a2449;
  --av-cell-heading-label: #ffffff;
  --av-cell-primary-bg: #202020;
  --av-cell-primary-bg-hover: #282828;
  --av-cell-primary-bg-active: #2d2d2d;
  --av-cell-primary-label: #ffffff;
  --av-cell-secondary-bg: #23262a;
  --av-cell-secondary-bg-hover: #21262d;
  --av-cell-secondary-bg-active: #1f2631;
  --av-cell-secondary-label: #ffffff;
}

/*
///////////////////////////////////////////////////
// component / navbar (5 tokens)
///////////////////////////////////////////////////
*/

:root {
  --av-meganav-bg: #ffffff;
  --av-btn-nav-bg: #ffffff;
  --av-btn-nav-bg-hover: #ffffff;
  --av-btn-nav-bg-active: #ffffff;
  --av-btn-nav-label: #ffffff;
}