/* Fonts */
@font-face {
  font-family: 'RobotoSlab';
  src: url('fonts/roboto-slab/roboto-slab-bold.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'OpenSans';
  src: url('fonts/opensans/opensans-regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'OpenSans';
  src: url('fonts/opensans/opensans-bold.ttf') format('truetype');
  font-weight: 600;
}

/* Icons */
@font-face {
  font-family: 'IconAPG';
  src: url('icons/apg/icons-apg.woff2') format('woff2');
}

/* CSS variables */
:root {
  /* Color variables */
  --s-color-primary: #ffc541;
  --s-color-primary-hover: #ffde8f;
  --s-color-secondary: #0d58a8;
  --s-color-secondary-hover: #0a417d;
  --s-color-button-text-primary: #000;
  --s-color-button-secondary: #0d58a8;
  --s-color-button-text-secondary: #fff;
  --s-color-outline: #0d58a8;
  --s-color-outline-hover: #bacfe6;
  --s-color-button-outline: #0d58a8;
  --s-color-button-outline-hover: #0d58a8;
  --s-color-border-outline-hover: #0d58a8;
  --s-color-link: #0d58a8;
  --s-color-link-hover: #0d58a8;
  --s-color-header: #0d58a8;
  --s-color-text: #2a221d;
  --s-color-text-light: #acaeb0;
  --s-color-text-medium: #70787d;
  --s-color-border: #dad7d5;
  --s-color-border-input: #70777d;
  --s-color-border-input-focus: #0d58a8;
  --s-color-danger: #ae271c;
  --s-color-danger-back: #ffcac7;
  --s-color-error: #e71d36;
  --s-color-warning: #ffc541;
  --s-color-warning-back: #fff0cc;
  --s-color-info: #0d58a8;
  --s-color-info-back: #dde7f2;
  --s-color-label: #dde7f2;
  --s-color-success: #5a961e;
  --s-color-success-back: #deedb4;
  --s-color-background: #edf6fc;
  --s-color-background-light: #bbc1c5;
  --s-color-background-light-grey: #f5f7f8;
  --s-color-background-medium: #d6dde1;
  --s-color-background-dark: #0d58a8;
  --s-color-background-sub: #2568b1;
  --s-color-disabled: #afafaf;
  --s-color-disabled-linkcard: #f5f7f8;
  --s-color-disabled-dark: #70787d;
  --s-color-disabled-back: #e2e5e9;
  --s-color-dropdown: #0d58a8;
  --s-color-dropdown-hover: #bacfe6;
  --s-color-white: #fff;
  --s-color-black: #000;
  --s-color-grey: #dde7f2;
  --s-color-dark-grey: #0d58a8;
  --s-color-overlay: rgba(0, 0, 0, 0.7);
  --s-color-primary-highlighted: #0a417d;
  --s-color-file-upload-back: #eaeaf4;
  --s-color-chip: #dde7f2;
  --s-color-lines: #ffc541;
  --s-color-marker: #cb485e;
  --s-color-counter-color: #0d58a8;
  --s-color-counter-background: #ffc541;

  /* Font Family */
  --s-font-family-base: 'OpenSans', sans-serif;
  --s-font-family-header: 'RobotoSlab', serif;
  --s-font-family-badge: 'OpenSans', serif;
  --s-font-family-button: 'OpenSans', serif;
  --s-font-family-link: 'OpenSans', serif;
  --s-font-family-switch: 'OpenSans', serif;
  --s-font-family-label: 'OpenSans', serif;
  --s-font-family-description: 'OpenSans', serif;
  --s-font-family-navbar: 'OpenSans', serif;
  --s-font-family-footer: 'OpenSans', serif;
  --s-font-family-list: 'OpenSans', serif;
  --s-font-icon: 'IconAPG';

  /* Font size variables */
  --s-font-size-html: 16px;
  --s-font-size-base: 1rem;
  --s-font-size-100: 100%;
  --s-font-size-h1: 3rem;
  --s-font-size-h2: 2.5rem;
  --s-font-size-h3: 2rem;
  --s-font-size-h4: 1.5rem;
  --s-font-size-h5: 1.25rem;
  --s-font-size-h6: 1.125rem;
  --s-font-size-p: 1rem;
  --s-font-size-small: 0.875rem;
  --s-font-size-h1-mobile: 2rem;
  --s-font-size-h2-mobile: 1.5rem;
  --s-font-size-h3-mobile: 1.25rem;
  --s-font-size-h4-mobile: 1.125rem;
  --s-font-size-h5-mobile: 1rem;
  --s-font-size-h6-mobile: 1rem;
  --s-font-size-p-mobile: 1rem;
  --s-font-size-label: 1rem;
  --s-font-size-navbar: 1.25rem;

  /* Spacing variables */
  --s-spacing-xxs: 0.25rem;
  --s-spacing-xs: 0.5rem;
  --s-spacing-sm: 0.75rem;
  --s-spacing-md: 1rem;
  --s-spacing-lg: 1.5rem;
  --s-spacing-xl: 2rem;
  --s-spacing-2xl: 2.5rem;
  --s-spacing-3xl: 3rem;
  --s-spacing-4xl: 6rem;
  --s-spacing-section: 2rem;
  --s-spacing-section-overlay-top: 4rem;
  --s-spacing-section-overlay-md: 7rem;
  --s-spacing-section-overlay-lg: 10rem;

  /* Border Radius */
  --s-border-radius-base: 0;
  --s-border-radius-input: 0;
  --s-border-radius-button: 0;
  --s-border-radius-dropdown: 8px;
  --s-border-radius-card: 0;
  --s-border-radius-chat: 0;
  --s-border-radius-chat-input: 0;
  --s-border-radius-alert: 0;
  --s-border-radius-icon: 0;
  --s-border-radius-rounded: 0;
  --s-border-radius-round: 0;
  --s-border-radius-tabs: 0;
  --s-border-radius-action-item: 0;
  --s-border-radius-menu-item: 0;

  /* Boxshadow variables */
  --s-standard-shadow: 0px 4px 8px 0px rgba(5, 7, 72, 0.25);
  --s-button-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);

  /* Max Width */
  --s-max-width-content: 50rem;
  --s-max-width-container: 78rem;

  /* PensionFactors colors */
  --s-color-first-pension-factor: #6062bb;
  --s-color-second-pension-factor: #0d58a8;
  --s-color-third-pension-factor: #109fc6;

  /* Accruement and projection colors */
  --s-color-accrued: #b9e0f8;
  --s-color-accrued-secondary: #dfefff;
  --s-color-accrued-tertiary: #b9e0f810;
  --s-color-accrued-quarternary: var(--s-color-info);
  --s-color-projected: #edf6fc;

  /* Logo */
  --s-background-image-url: url('/assets/bpf-schoonmaak/images/logo-bpf-schoonmaak.svg');

  /* Chatbot */
  --s-color-chat-text-background: #f2f0eb;
  --s-color-chat-text-background-input: #bfc2e6;
  --s-color-chat-choice-border: #eaeaf4;
  --s-color-chat-choice-border-focus: #595dca;
  --s-color-chat-choice-background-focus: #eaeaf4;
  --s-color-chat-input-border: #70777d;

  /* Chip v2 Neutral */
  --s-color-chip-neutral: #0d58a8;
  --s-color-chip-neutral-back: #dde7f2;

  /* Chip v2 Secondary */
  --s-color-chip-secondary: #333333;
  --s-color-chip-secondary-back: #edf1f2;
}