@font-face {
  font-weight: bold;
  font-family: 'Apercu Pro';
  font-style: normal;
  src: url('assets/theme/fonts/ApercuPro-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: 300;
  font-family: 'Apercu Pro';
  font-style: normal;
  src: url('assets/theme/fonts/ApercuPro-Light.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Light.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: normal;
  font-family: 'Apercu Pro';
  font-style: normal;
  src: url('assets/theme/fonts/ApercuPro-Regular.woff2') format('woff2'),
    url('assets/theme/fonts/ApercuPro-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: bold;
  font-family: 'Proxima Nova';
  font-style: normal;
  src: url('assets/theme/fonts/ProximaNova-Bold.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Bold.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: normal;
  font-family: 'Proxima Nova';
  font-style: normal;
  src: url('assets/theme/fonts/ProximaNova-Regular.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Regular.woff') format('woff');
  font-display: swap;
}

@font-face {
  font-weight: 500;
  font-family: 'Proxima Nova';
  font-style: normal;
  src: url('assets/theme/fonts/ProximaNova-Semibold.woff2') format('woff2'),
    url('assets/theme/fonts/ProximaNova-Semibold.woff') format('woff');
  font-display: swap;
}

#app {
  /* general color variables */
  --theme-color-1: #003e52;
  --theme-color-2: #b8d8eb;
  --theme-color-3: #c59;
  --theme-color-4: #6fa088;
  --theme-color-5: #ee7622;
  --color-white: #fff;
  --color-gold: #ffdc92;
  --color-light-blue: #81b7c8;
  --color-lighter-blue: #e5f6fe;
  --color-dark-blue: #032a3d;

  /* font variables */
  --root-font-family: 'Apercu Pro', helvetica, arial, sans-serif;
  --root-font-family-secondary: 'Proxima Nova', helvetica, arial, sans-serif;
  --root-font-size: 16px;
  --root-font-weight: 400;
  --light-text-color: var(--color-white);
  --dark-text-color: var(--theme-color-1);

  /* top bar */
  --top-bar-height: 31px;

  /* button variables */
  --button-border-radius: 23px;

  /* CTA pink button */
  --primary-button-background-color: var(--theme-color-3);
  --primary-button-text-color: var(--color-white);

  /* lightblue button */
  --secondary-button-background-color: var(--theme-color-2);
  --secondary-button-text-color: var(--theme-color-1);

  /* darkblue button */
  --tertiary-button-background-color: var(--theme-color-1);
  --tertiary-button-text-color: var(--color-white);

  /* color of bingoballs + lottery ticket colors */
  --column-1-bingo-color-75-total: var(--theme-color-3);
  --column-2-bingo-color-75-total: var(--color-light-blue);
  --column-3-bingo-color-75-total: var(--theme-color-1);
  --column-4-bingo-color-75-total: var(--theme-color-5);
  --column-5-bingo-color-75-total: var(--theme-color-4);

  /* mobile menu */
  --menu-background-color: var(--color-lighter-blue);

  /* settings component variables */
  --lot-highlight-color-1: #7cb7d0;
  --lot-highlight-color-2: var(--theme-color-3);
  --lot-highlight-color-3: var(--theme-color-4);
  --lot-highlight-color-4: var(--theme-color-5);
  --settings-selected-color: var(--theme-color-1);
  --toggle-bg-color: #c9e8f4;
  --toggle-handle-color: var(--color-light-blue);
  --toggle-handle-color-active: var(--color-dark-blue);

  /* list available prizes component variables */
  --bingo-icon-unselected: #cecece;
  --bingo-icon-selected: var(--theme-color-1);
  --bingo-icon-unselected-dark: #06566f;
  --bingo-icon-selected-dark: var(--color-white);
  --bingo-light-background: var(--color-white);
  --bingo-dark-background: var(--color-dark-blue);

  /* menu */
  --layout-icon-background-color: var(--toggle-bg-color);
  --selected-layout-icon-background-color: var(--bingo-icon-unselected-dark);
  --menu-icon-white: var(--color-white);
  --menu-icon-blue: var(--theme-color-1);

  /* leaderboard component variables */
  --leaderboard-background: var(--theme-color-1);
  --leaderboard-background-current-user: var(--toggle-handle-color-active);
  --leaderboard-bingo-ball-border: var(--color-white);
  --leaderboard-yellow-bingo-ball-icon: #f8df8d;
  --leaderboard-green-bingo-ball-icon: var(--theme-color-4);

  /* Buttons for buying lottery tickets */
  --background-color-predefined-values-button: var(--theme-color-1);
  --text-color-predefined-values-button: var(--color-white);
  --background-color-plus-and-minus-buttons: var(--color-white);
  --text-color-plus-and-minus-buttons: var(--theme-color-1);
  --background-color-display-box: var(--color-lighter-blue);
  --text-color-display-box: var(--theme-color-1);

  /* Chat */
  --chat-background-color: #c9e8f4;
  --chat-background-blue: #68a1b9;
  --chat-text-color: #06566f;
  --chat-notice-background-color: #06566f;
  --chat-notice-text-color: var(--color-white);
  --chat-tab-highlight-color: #7cb7d0;
  --chat-shadow-color: var(--color-dark-blue);

  /* Scrollbars */
  --scroll-bar-thumb-color: var(--color-dark-blue);
  --scroll-bar-track-color: rgba(255, 255, 255, 0.5);

  /* Spinner */
  --spinner-background-color: var(--color-dark-blue);
  --spinner-color: rgba(255, 255, 255, 0.5);

  /* Modal */
  --modal-background-color: rgba(0, 38, 50, 0.8);
  --modal-text-color: var(--theme-color-1);
  --modal-button-background-color: var(--color-white);
  --modal-button-text-color: #053a53;

  /* Dialogue/pop-up */
  --darkblue-popup-background: var(--theme-color-1);
  --lightblue-popup-background: var(--color-lighter-blue);
  --light-popup-background: var(--color-white);

  /* Bingo card */
  --bingo-card-background-color: var(--color-white);
  --bingo-card-shadow: rgba(3, 42, 61, 0.15);
  --bingo-card-number-text-color: var(--theme-color-1);
  --bingo-card-number-background-color: #eeedeb;
  --bingo-card-b-background-color: var(--theme-color-3);
  --bingo-card-i-background-color: #7cb7d0;
  --bingo-card-n-background-color: var(--theme-color-1);
  --bingo-card-g-background-color: var(--theme-color-5);
  --bingo-card-o-background-color: var(--theme-color-4);
  --bingo-card-footer-background-color: var(--theme-color-1);
  --bingo-card-footer-text-color: var(--color-white);
  --bingo-card-footer-select-background-color: var(--theme-color-3);
  --bingo-card-footer-purchased-background-color: var(--theme-color-4);

  /* Purchase */
  --reload-button-background-color: var(--theme-color-1);
  --reload-button-color: var(--color-white);

  /* History */
  --history-background-color: rgba(0, 38, 50, 0.8);
  --history-bingo-card-header-background-color: var(--color-dark-blue);
  --history-bingo-card-background-color: #cecece;
  --history-bingo-card-number-background-color: #eeedeb;
  --history-bingo-card-number-color: rgba(0, 62, 82, 0.5);
  --history-bingo-card-number-highlighted-color: #06566f;
}