@font-face {
  font-family: 'Monoton';
  src: url('./fonts/Monoton-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Playback';
  src: url('./fonts/Playback.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Poiret One';
  src: url('./fonts/PoiretOne-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --brand-font-logo: 'Monoton', cursive;
  --brand-font-heading: 'Playback', sans-serif;
  --brand-font-body: 'Poiret One', sans-serif;

  --brand-primary: #00fcfd;
  --brand-primary-light: #73f7fb;
  --brand-primary-dark: #00b3fd;
  --brand-primary-hover: #33fcfd;
  --brand-primary-active: #00d4d7;

  --brand-secondary: #ff3770;
  --brand-secondary-light: #f27aa9;
  --brand-secondary-dark: #cd55af;
  --brand-secondary-hover: #ff5a8a;
  --brand-secondary-active: #e0205c;

  --brand-neon-yellow: #f5ff00;
  --brand-neon-green: #2dff00;

  --brand-black: #000000;
  --brand-white: #ffffff;
  --brand-grey-100: #f5f5f5;
  --brand-grey-200: #e0e0e0;
  --brand-grey-300: #bfbfbf;
  --brand-grey-400: #989898;
  --brand-grey-500: #7e7e7e;
  --brand-grey-600: #5e5e5e;
  --brand-grey-700: #3e3e3e;
  --brand-grey-800: #2d2d2d;
  --brand-grey-900: #191919;

  --brand-bg: #000000;
  --brand-bg-secondary: #111111;
  --brand-bg-card: #191919;
  --brand-text: #ffffff;
  --brand-text-secondary: #bfbfbf;
  --brand-text-muted: #7e7e7e;
  --brand-border: #2d2d2d;
  --brand-nav-bg: #000000;
  --brand-logo: url('./logos/logo-light-text.svg');
  --brand-focus: 0 0 0 2px var(--brand-primary);
}

@media (prefers-color-scheme: light) {
  :root {
    --brand-bg: #ffffff;
    --brand-bg-secondary: #f5f5f5;
    --brand-bg-card: #ffffff;
    --brand-text: #000000;
    --brand-text-secondary: #5e5e5e;
    --brand-text-muted: #989898;
    --brand-border: #e0e0e0;
    --brand-nav-bg: #ffffff;
    --brand-logo: url('./logos/logo-dark-text.svg');
  }
}