/* Fonts */
@font-face {
  font-family: 'Calibre';
  src: url('fonts/calibre/calibre-regular.woff') format('woff');
  font-weight: 400;
}

@font-face {
  font-family: 'Calibre';
  src: url('fonts/calibre/calibre-bold.woff') format('woff');
  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: #f8b334;
  --s-color-primary-hover: #fad185;
  --s-color-secondary: #007d6d;
  --s-color-secondary-hover: #247999;
  --s-color-button-text-primary: #2a221d;
  --s-color-button-secondary: #007d6d;
  --s-color-button-text-secondary: #fff;
  --s-color-outline: #007d6d;
  --s-color-outline-hover: #247999;
  --s-color-button-outline: #2a221d;
  --s-color-button-outline-hover: #fff;
  --s-color-border-outline-hover: #247999;
  --s-color-link: #007d6d;
  --s-color-link-hover: #0a403a;
  --s-color-header: #463931;
  --s-color-text: #2a221d;
  --s-color-text-light: #acaeb0;
  --s-color-text-medium: #70787d;
  --s-color-border: #dad7d5;
  --s-color-border-input: #585e62;
  --s-color-border-input-focus: #247999;
  --s-color-danger: #a81c14;
  --s-color-danger-back: #f6d3d1;
  --s-color-error: #e71d36;
  --s-color-warning: #dfae41;
  --s-color-warning-back: #fcf4d6;
  --s-color-info: #2e98c0;
  --s-color-info-back: #e1f0f6;
  --s-color-label: #e1f0f6;
  --s-color-success: #007d6d;
  --s-color-success-back: #e1f1ed;
  --s-color-background: #f5f2f0;
  --s-color-background-light: #cfcfcf;
  --s-color-background-light-grey: #f5f2f0;
  --s-color-background-medium: #dfdfdf;
  --s-color-background-dark: #463931;
  --s-color-background-sub: #584c45;
  --s-color-disabled: #afafaf;
  --s-color-disabled-linkcard: #f5f7f8;
  --s-color-disabled-dark: #70787d;
  --s-color-disabled-back: #e2e5e9;
  --s-color-dropdown: #2a221d;
  --s-color-dropdown-hover: #dad7d5;
  --s-color-white: #fff;
  --s-color-black: #000;
  --s-color-grey: #f5f2f0;
  --s-color-dark-grey: #463931;
  --s-color-overlay: rgba(0, 0, 0, 0.7);
  --s-color-primary-highlighted: #0f6157;
  --s-color-file-upload-back: #eaeaf4;
  --s-color-chip: #e1f0f6;
  --s-color-lines: #dfae41;
  --s-color-marker: #cb485e;
  --s-color-counter-color: #2a221d;
  --s-color-counter-background: #f8b334;

  /* Font Family */
  --s-font-family-base: 'Calibre', sans-serif;
  --s-font-family-header: 'Calibre', serif;
  --s-font-family-badge: 'Calibre', serif;
  --s-font-family-button: 'Calibre', serif;
  --s-font-family-link: 'Calibre', serif;
  --s-font-family-switch: 'Calibre', serif;
  --s-font-family-label: 'Calibre', serif;
  --s-font-family-description: 'Calibre', serif;
  --s-font-family-navbar: 'Calibre', serif;
  --s-font-family-footer: 'Calibre', serif;
  --s-font-family-list: 'Calibre', 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: #2e318f;
  --s-color-third-pension-factor: #109fc6;

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

  /* Logo */
  --s-background-image-url: url('/assets/spw/images/spw-logo.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: #2e318f;
  --s-color-chip-neutral-back: #e1f0f6;

  /* Chip v2 Secondary */
  --s-color-chip-secondary: #262626;
  --s-color-chip-secondary-back: #ededed;
}