@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway/Raleway-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: normal;
}

@font-face {
  font-family: 'Raleway';
  src: url('../fonts/Raleway/Raleway-Italic-VariableFont_wght.ttf') format('truetype');
  font-weight: 100 900;
  font-style: italic;
}

/**
 * FCB – branche Sociaal werk (SW). Alleen dit bestand wijzigen voor dit thema.
 *
 * Lettertype: Raleway (lokaal: assets/fonts/Raleway/*.ttf).
 *
 * - Balk boven: transparant.
 * - Balk onder (vorige/volgende): SW 100 + tekst/pijlen SW 1000 (overschrijving onderaan).
 * - Inloggen / structuur-knoppen: SW 1000 (--kmo-role-secondary-color-1).
 * - Hover linkermenu: SW 800 (--kmo-role-cta-color).
 * - App-achtergrond: Sand 500 → Sand 100 (neutraal FCB-zand).
 */
:root {
  --kmo-sys-color-white: #ffffff;

  /* SW – Sociaal werk (rood/oranje) */
  --kmo-fcb-sw-1000: #c6361e;
  --kmo-fcb-sw-800: #ea4721;
  --kmo-fcb-sw-500: #fe8057;
  --kmo-fcb-sw-200: #f9b497;
  --kmo-fcb-sw-100: #ffebe3;

  /* FCB – Sand (neutrale achtergrond) */
  --kmo-fcb-sand-500: #e5e1d2;
  --kmo-fcb-sand-100: #f9f7f2;

  --kmo-sys-color-darkblue: var(--kmo-fcb-sw-1000);
  --kmo-sys-color-purpleblue: var(--kmo-fcb-sw-1000);
  --kmo-sys-color-purple: var(--kmo-fcb-sw-1000);
  --kmo-sys-color-lightblue: var(--kmo-fcb-sw-100);
  --kmo-sys-color-babyblue: var(--kmo-fcb-sw-200);
  --kmo-sys-color-yellow: var(--kmo-fcb-sw-800);

  --kmo-sys-fontfamily-nunito: 'Raleway', 'Segoe UI', 'Roboto', 'Helvetica Neue', Arial, sans-serif;

  --kmo-role-primary-color-1: var(--kmo-fcb-sw-1000);
  --kmo-role-primary-color-2: var(--kmo-fcb-sw-1000);
  --kmo-role-secondary-color-1: var(--kmo-fcb-sw-1000);
  --kmo-role-secondary-color-2: var(--kmo-fcb-sw-100);
  --kmo-role-cta-color: var(--kmo-fcb-sw-800);

  --kmo-role-fontfamily-base: var(--kmo-sys-fontfamily-nunito);
  --kmo-role-font-size-large: 1.125rem;
  --kmo-role-font-weight-bold: 700;

  --kmo-cmp-app-background-gradient: linear-gradient(
    125deg,
    var(--kmo-fcb-sand-500) 0%,
    var(--kmo-fcb-sand-100) 72%
  );
  --kmo-cmp-app-background-color-fallback: var(--kmo-fcb-sand-100);

  --kmo-cmp-toolbar-background-color: transparent;
  --kmo-cmp-toolbar-font-color: var(--kmo-role-primary-color-1);
  --kmo-cmp-toolbar-button-background-color-hover: var(--kmo-role-secondary-color-1);
}

/**
 * Onderbalk: alleen kmo-bottombar overrulen.
 */
kmo-bottombar nav {
  background-color: var(--kmo-fcb-sw-100) !important;
}

kmo-bottombar nav ul > li {
  color: var(--kmo-fcb-sw-1000) !important;
  border-right-color: rgba(198, 54, 30, 0.28) !important;
}

kmo-bottombar nav ul > li > i:not(.disabled) {
  background-color: var(--kmo-fcb-sw-1000) !important;
}

kmo-bottombar nav ul > li > i.disabled {
  background-color: rgba(198, 54, 30, 0.35) !important;
}

kmo-bottombar nav ul > li span.disabled,
kmo-bottombar .disabled {
  color: rgba(198, 54, 30, 0.45) !important;
}