/* Fonts */
@font-face {
  font-family: 'Blender';
  src: url('fonts/blender/blender-book.woff2') format('woff2');
  font-weight: 400;
}

@font-face {
  font-family: 'Blender';
  src: url('fonts/blender/blender-bold.woff2') format('woff2');
  font-weight: 700;
}

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

/* CSS variables */
:root {
  /* Color variables */
  --s-color-primary: #755df6;
  --s-color-primary-hover: #413389;
  --s-color-secondary: #2f251a;
  --s-color-secondary-hover: #6f573e;
  --s-color-button-text-primary: #fff;
  --s-color-button-secondary: #2f251a;
  --s-color-button-text-secondary: #fff;
  --s-color-outline: #2f251a;
  --s-color-outline-hover: #dcd1c6;
  --s-color-button-outline: #2f251a;
  --s-color-button-outline-hover: #2f251a;
  --s-color-border-outline-hover: #2f251a;
  --s-color-link: #2f251a;
  --s-color-link-hover: #2f251a;
  --s-color-header: #6f573e;
  --s-color-text: #2f251a;
  --s-color-text-light: #acaeb0;
  --s-color-text-medium: #70787d;
  --s-color-border: #d1d7da;
  --s-color-border-input: #70777d;
  --s-color-border-input-focus: #755df6;
  --s-color-danger: #a2361b;
  --s-color-danger-back: #ffe2db;
  --s-color-error: #a2361b;
  --s-color-warning: #977100;
  --s-color-warning-back: #ffecb6;
  --s-color-info: #755df6;
  --s-color-info-back: #e9e6fd;
  --s-color-label: #ede8e2;
  --s-color-success: #008674;
  --s-color-success-back: #e1f1ef;
  --s-color-background: #f8f5f4;
  --s-color-background-light: #e0dacb;
  --s-color-background-light-grey: #f5f7f8;
  --s-color-background-medium: #e9e5db;
  --s-color-background-dark: #463931;
  --s-color-background-sub: #7e7266;
  --s-color-disabled: #afafaf;
  --s-color-disabled-linkcard: #f5f7f8;
  --s-color-disabled-dark: #70787d;
  --s-color-disabled-back: #e2e5e9;
  --s-color-dropdown: #2f251a;
  --s-color-dropdown-hover: #dcd1c6;
  --s-color-white: #fff;
  --s-color-black: #000;
  --s-color-grey: #f5f7f8;
  --s-color-dark-grey: #999999;
  --s-color-overlay: rgba(0, 0, 0, 0.7);
  --s-color-primary-highlighted: #2f251a;
  --s-color-file-upload-back: #eaeaf4;
  --s-color-chip: #ede8e2;
  --s-color-lines: #ffbe01;
  --s-color-marker: #d24724;
  --s-color-counter-color: #fff;
  --s-color-counter-background: #977100;

  /* Font Family */
  --s-font-family-base: 'Blender', sans-serif;
  --s-font-family-header: 'Blender', serif;
  --s-font-family-button: 'Blender', serif;
  --s-font-family-link: 'Blender', serif;
  --s-font-family-switch: 'Blender', serif;
  --s-font-family-label: 'Blender', serif;
  --s-font-family-description: 'Blender', serif;
  --s-font-family-navbar: 'Blender', serif;
  --s-font-family-footer: 'Blender', serif;
  --s-font-family-list: 'Blender', serif;
  --s-font-family-badge: 'ChG', 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.5rem;

  /* 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: 0;
  --s-border-radius-card: 0;
  --s-border-radius-chat: 8px;
  --s-border-radius-chat-input: 4px;
  --s-border-radius-alert: 0;
  --s-border-radius-icon: 0;
  --s-border-radius-rounded: 20px;
  --s-border-radius-round: 0;
  --s-border-radius-tabs: 0;
  --s-border-radius-action-item: 0.5rem;
  --s-border-radius-menu-item: 0.5rem;

  /* Boxshadow variables */
  --s-standard-shadow: 0 4px 8px 0 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: #2e318f;
  --s-color-third-pension-factor: #109fc6;

  /* Accruement and projection colors */
  --s-color-accrued: #dcd1c6;
  --s-color-accrued-secondary: #7fbfe7;
  --s-color-accrued-tertiary: #b9e0f810;
  --s-color-accrued-quarternary: var(--s-color-info);
  --s-color-projected: #edf1f2;

  /* Logo */
  --s-background-image-url: url('/assets/bpf-bouw/images/logo-bpf-bouw.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: #907151;
  --s-color-chip-neutral-back: #ede8e2;

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