/* Fonts */
@font-face {
  font-family: 'Quicksand';
  src: url('fonts/quicksand/Quicksand-Regular.ttf') format('truetype');
  font-weight: 400;
}

@font-face {
  font-family: 'Quicksand';
  src: url('fonts/quicksand/Quicksand-Bold.ttf') format('truetype');
  font-weight: 600;
}

@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: #e16214;
  --s-color-primary-hover: #b24e10;
  --s-color-primary-highlighted: #00426b;
  --s-color-secondary: #417826;
  --s-color-secondary-hover: #375227;

  --s-color-button-text-primary: #fff;
  --s-color-button-secondary: #417826;
  --s-color-button-text-secondary: #fff;

  --s-color-outline: #417826;
  --s-color-outline-hover: #d6e3cf;
  --s-color-button-outline: #417826;
  --s-color-button-outline-hover: #375227;
  --s-color-border-outline-hover: #375227;

  --s-color-link: #00629f;
  --s-color-link-hover: #00426b;
  --s-color-link-card-indicator: #417826;

  --s-color-header: #2f3a29;
  --s-color-text: #333;
  --s-color-text-light: #acaeb0;
  --s-color-text-medium: #585e62;
  --s-color-label: #ccebf1;

  --s-color-border: #d1d7da;
  --s-color-border-input: #70777d;
  --s-color-border-input-focus: #417826;

  --s-color-danger: #c94b59;
  --s-color-danger-back: #f0bec9;
  --s-color-error: #e71d36;

  --s-color-warning: #f9b140;
  --s-color-warning-back: #fef3cd;

  --s-color-info: #00629f;
  --s-color-info-back: #ddf0ff;

  --s-color-success: #417826;
  --s-color-success-back: #d6e3cf;

  --s-color-background: #f2f0eb;
  --s-color-background-light: #e0dacb;
  --s-color-background-light-grey: #f5f7f8;
  --s-color-background-medium: #e9e5db;
  --s-color-background-dark: #00629f;

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

  --s-color-dropdown: #375227;
  --s-color-dropdown-hover: #d6e3cf;

  --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: #f9af3c;
  --s-color-marker: #00629f;

  --s-color-counter-color: #fff;
  --s-color-counter-background: #417826;

  /* Font Family */
  --s-font-family-base: 'OpenSans', sans-serif;
  --s-font-family-header: 'Quicksand', serif;
  --s-font-family-badge: 'OpenSans', sans-serif;
  --s-font-family-button: 'OpenSans', serif;
  --s-font-family-link: 'OpenSans', serif;
  --s-font-family-switch: 'Quicksand', serif;
  --s-font-family-label: 'OpenSans', sans-serif;
  --s-font-family-description: 'Quicksand', serif;
  --s-font-family-navbar: 'Quicksand', serif;
  --s-font-family-footer: 'Quicksand', serif;
  --s-font-family-list: 'Quicksand', 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: 20px;
  --s-border-radius-input: 10px;
  --s-border-radius-button: 24px;
  --s-border-radius-dropdown: 8px;
  --s-border-radius-card: 16px;
  --s-border-radius-chat: 8px;
  --s-border-radius-chat-input: 4px;
  --s-border-radius-alert: 8px;
  --s-border-radius-icon: 24px;
  --s-border-radius-rounded: 10px;
  --s-border-radius-round: 50%;
  --s-border-radius-tabs: 4px;
  --s-border-radius-action-item: 16px;
  --s-border-radius-menu-item: 1rem;

  /* 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: #ddf0ff;

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

  /* Chatbot */
  --s-color-chat-text-background: #f2f0eb;
  --s-color-chat-text-background-input: #ddf0ff;
  --s-color-chat-choice-border: #f2f0eb;
  --s-color-chat-choice-background-focus: #f5f7f8;
  --s-color-chat-input-border: #70777d;

  /* Chip */
  --s-color-chip-neutral: #00426b;
  --s-color-chip-neutral-back: #ddf0ff;
  --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);
}