/**
 * fonts.css - Font definities voor towFlow app
 * 
 * Dit bestand bevat alle font-face declaraties en font-gerelateerde stijlen.
 * Het is gescheiden van de hoofdstijlen voor betere prestaties en onderhoudbaarheid.
 */

/* TowflowRegular font voor de algemene interface */
@font-face {
    font-family: 'TowflowRegular';
    src: url('../fonts/AmpleSoftPro-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap; /* Verbetert performance door tijdelijk een fallback font te tonen */
  }
  
  /* TowflowBold font voor headers en belangrijke elementen */
  @font-face {
    font-family: 'TowflowBold';
    src: url('../fonts/AmpleSoftPro-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  
  /* Roboto als secundair en fallback font */
  @font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
  }
  
  @font-face {
    font-family: 'Roboto';
    src: url('../fonts/Roboto-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
  }
  
  /* Algemene font classes voor specifieke stijlen */
  .font-towflow {
    font-family: 'TowflowRegular', 'Roboto', sans-serif;
  }
  
  .font-towflow-bold {
    font-family: 'TowflowBold', 'Roboto', sans-serif;
    font-weight: bold;
  }
  
  .font-light {
    font-weight: 300;
  }
  
  .font-regular {
    font-weight: normal;
  }
  
  .font-medium {
    font-weight: 500;
  }
  
  .font-bold {
    font-weight: bold;
  }
  
  /* Tekst groottes */
  .text-xs {
    font-size: 12px;
  }
  
  .text-sm {
    font-size: 14px;
  }
  
  .text-base {
    font-size: 16px;
  }
  
  .text-lg {
    font-size: 18px;
  }
  
  .text-xl {
    font-size: 20px;
  }
  
  .text-2xl {
    font-size: 24px;
  }
  
  .text-3xl {
    font-size: 30px;
  }