@font-face {
  font-family: 'YouTube Sans';
  src: url('/fonts/youtube_sans_bold_font.ttf') format('truetype');
  font-weight: 700;
  font-display: swap;
}

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

@font-face {
  font-family: 'Roboto';
  src: url('/fonts/Roboto-Medium.ttf') format('truetype');
  font-weight: 500;
  font-display: swap;
}

:root {
  --yt-bg:        #0F0F0F;
  --yt-surface:   #1F1F1F;
  --yt-surface-2: #282828;
  --yt-border:    #303030;
  --yt-text:      #FFFFFF;
  --yt-text-2:    #AAAAAA;
  --yt-text-3:    #888888;
  --yt-red:       #FF0000;
  --yt-ok:        #4CAF50;
  --yt-bad:       #F44336;

  --font-brand: 'YouTube Sans', 'Roboto', 'Helvetica Neue', Arial, sans-serif;
  --font-body:  'Roboto', 'Helvetica Neue', Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--yt-bg);
  color: var(--yt-text);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
}