/*
  Fall Guys-style UI fonts.
  - Titan One: chunky bubble display font for headings, titles, big numbers.
  - Baloo 2: rounded body/UI font (variable weight, use 500 for UI text, 700 for sub-headings).
  Paths are relative to this file (public/ui/fonts/).
*/

@font-face {
  font-family: 'Titan One';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src:
    url('./TitanOne-Regular.woff2') format('woff2'),
    url('./TitanOne-Regular.ttf') format('truetype');
}

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src:
    url('./Baloo2-Variable.woff2') format('woff2-variations'),
    url('./Baloo2-Variable.woff2') format('woff2'),
    url('./Baloo2-Variable.ttf') format('truetype-variations'),
    url('./Baloo2-Variable.ttf') format('truetype');
  font-variation-settings: 'wght' 500;
}

@font-face {
  font-family: 'Baloo 2';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src:
    url('./Baloo2-Variable.woff2') format('woff2-variations'),
    url('./Baloo2-Variable.woff2') format('woff2'),
    url('./Baloo2-Variable.ttf') format('truetype-variations'),
    url('./Baloo2-Variable.ttf') format('truetype');
  font-variation-settings: 'wght' 700;
}

/*
  Usage:
    h1, .title, .display  { font-family: 'Titan One', cursive; }
    body, .ui, button     { font-family: 'Baloo 2', sans-serif; font-weight: 500; }
    .ui-strong             { font-family: 'Baloo 2', sans-serif; font-weight: 700; }
*/