/* Fonts */
@font-face {
  font-family: 'FrescoSansPro';
  src: url('fonts/frescosanspro/frescosanspro-normal.woff') format('woff2');
  font-weight: 600;
}

@font-face {
  font-family: 'FrescoSansPro';
  src: url('fonts/frescosanspro/frescosanspro-bold.woff') format('woff2');
  font-weight: 800;
}

@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: 'SOLicons';
  src: url('icons/sol/sol-icons.woff2') format('woff2');
}

/* CSS variables */
:root {
  /* Color variables */
  --s-color-primary: #d9d92b;
  --s-color-primary-hover: #bfbf20;
  --s-color-primary-highlighted: #3692e2;
  --s-color-secondary: #0057a3;
  --s-color-secondary-hover: #004682;

  --s-color-button-text-primary: #333;
  --s-color-button-secondary: #0057a3;
  --s-color-button-text-secondary: #fff;

  --s-color-outline: #0057a3;
  --s-color-outline-hover: #c2e0fa;
  --s-color-button-outline: #0057a3;
  --s-color-button-outline-hover: #0057a3;
  --s-color-border-outline-hover: #0057a3;

  --s-color-link: #0057a3;
  --s-color-link-hover: #0057a3;
  --s-color-link-card-indicator: #0057a3;

  --s-color-header: #0057a3;
  --s-color-text: #333;
  --s-color-text-light: #acaeb0;
  --s-color-text-medium: #70787d;
  --s-color-label: #b9e0f8;

  --s-color-border: #d1d7da;
  --s-color-border-input: #70787d;
  --s-color-border-input-focus: #0057a3;

  --s-color-danger: #cb485e;
  --s-color-danger-back: #ffccd5;
  --s-color-error: #cc092f;

  --s-color-warning: #dfae41;
  --s-color-warning-back: #fcf4d6;

  --s-color-info: #3692e2;
  --s-color-info-back: #e7f4fd;

  --s-color-success: #3c8543;
  --s-color-success-back: #daf1dc;

  --s-color-background: #f5f7f8;
  --s-color-background-light: #c7cdd1;
  --s-color-background-light-grey: #f5f7f8;
  --s-color-background-medium: #dae2e7;
  --s-color-background-dark: #0057a3;

  --s-color-disabled: #afafaf;
  --s-color-disabled-linkcard: #f5f7f8;
  --s-color-disabled-dark: #70787d;
  --s-color-disabled-back: #edf1f2;

  --s-color-dropdown: #0057a3;
  --s-color-dropdown-hover: #c2e0fa;

  --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-file-upload-back: #eaeaf4;

  --s-color-lines: #d9d92b;
  --s-color-marker: #cc092f;

  --s-color-counter-color: #333;
  --s-color-counter-background: #d9d92b;

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

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

  /* 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;

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

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

  /* Chatbot */
  --s-color-chat-text-background: #edf1f2;
  --s-color-chat-text-background-input: #c2e0fa;
  --s-color-chat-choice-border: #edf1f2;
  --s-color-chat-choice-background-focus: #eaeaf4;
  --s-color-chat-input-border: #70777d;

  /* Chip */
  --s-color-chip-neutral: #004682;
  --s-color-chip-neutral-back: #e7f4fd;
  --s-color-chip-secondary: #333333;
  --s-color-chip-secondary-back: #edf1f2;
  --s-color-chip-highlight: var(--s-color-info);
  --s-color-chip-highlight-back: var(--s-color-info-back);
}