/* Sizes are in px so themes that change the root font size cannot rescale them. */
:root {
  /* Colors */
  --primary-theme-color: #399ae4;
  --secondary-color: #ff1700;
  --pri-secondary-color: #ff7300;

  --text-color-dark: #212529;
  --text-color-light-dark: #343a40;
  --text-color-light: #495057;
  --text-color-lightest: #adb5bd;
  --text-color-white: #ffffff;
  --text-color-grey-white: #dee2e6;

  /* Typography */
  --font-family-base: 'Poppins', sans-serif;
  --font-family-heading: 'Poppins', sans-serif;

  --font-size-display: 40px;
  --font-size-header: 34px;
  --font-size-title: 30px;
  --font-size-sub-title: 24px;
  --font-size-medium: 20px;
  --font-size-normal: 16px;
  --font-size-small: 14px;

  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extraBold: 800;

  /* Layout */
  --screen-max-width: 1440px;
  --desktop-screen-padding: 20px;
  --desktop-screen-padding-large: 40px;
  --mobile-screen-padding: 10px;

  /* Spacing */
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 32px;

  /* Border radius */
  --border-radius-small: 8px;
  --border-radius-normal: 18px;
  --border-radius-full: 50%;
}