/* Use this file for font styling */
:root {
  /* Font sizes */
  --font-size-h1: 6rem;
  --font-size-h2: 3.75rem;
  --font-size-h3: 3rem;
  --font-size-h4: 2.125rem;
  --font-size-h5: 1.5rem;
  --font-size-h6: 1.25rem;
  --font-size-body-1: 1rem;
  --font-size-body-2: 0.875rem;
  --font-size-small: 0.8125rem;
  --font-size-caption: 0.75rem;
  --font-size-overline: 0.625rem;

  --font-xxs: 0.5rem;
  --font-xs: 0.625rem;
  --font-s: 0.75rem;
  --font-md: 0.875rem;
  --font-main: 1rem;
  --font-lg: 1.125rem;
  --font-xlg: 1.25rem;
  --font-xxlg: 1.5rem;
  --font-xxxlg: 1.75rem;

  /* Generic Properties */
  --style-normal: normal;
  --style-italic: italic;
  --theme-font-family: Roboto;
  --theme-font-family-mono: Roboto Mono, monospace;

  /* Font weight */
  --fontWeight-thin: 300;
  --fontWeight-normal: 400;
  --fontWeight-semibold: 500;
  --fontWeight-bold: 600;
  --fontWeight-black: 700;
  --fontWeight-extrablack: 900;

  /* Letter spacing */
  --letter-spacing-light-1: -1.5px;
  --letter-spacing-light-2: -0.5px;
  --letter-spacing-regular: 0;
  --letter-spacing-medium: 0.25px;
  --letter-spacing-subtitle-1: 0.15px;
  --letter-spacing-subtitle-2: 0.1px;
  --letter-spacing-button: 0.75px;
  --letter-spacing-caption: 0.4px;
  --letter-spacing-overline: 1.5px;

  /* Line height */
  --line-height-h1: 9rem;
  --line-height-h2: 5.625rem;
  --line-height-h3: 4.5rem;
  --line-height-h4: 3.1875rem;
  --line-height-h5: 2.25rem;
  --line-height-h6: 1.875rem;
  --line-height-body: 1.5rem;
  --line-height-subtitle: 1.3125rem;
  --line-height-small: 1.125rem;
  --line-height-caption: 1rem;
  --line-height-tag: 3.25rem;
}

body {
  background: var(--color-faintGrey);
  margin: 0;
  font-family: Roboto, Helvetica, Arial, sans-serif, 'Apple Color Emoji',
    'Segoe UI Emoji', 'Segoe UI Symbol';
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}

:root {
  /* Grey color */
  --color-grey-50: #fafafa;
  --color-grey-100: #f5f5f5;
  --color-grey-200: #eeeeee;
  --color-grey-300: #e0e0e0;
  --color-grey-400: #bdbdbd;
  --color-grey-500: #9e9e9e;
  --color-grey-600: #757575;
  --color-grey-700: #616161;
  --color-grey-800: #424242;
  --color-grey-900: #212121;

  --color-grey-background: #e5e5e5;

  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey: #80868b;
  --color-lightGrey: #bdbdbd;
  --color-lightPurple: #645df6;
  --color-lightBlue: #325bff;
  --color-pink: #ec407a;

  --color-label-low: #d3ea98;
  --color-label-medium: #fff8ad;
  --color-label-high: #ffc8bf;

  --color-borderGrey: rgba(115, 143, 179, 0.2);
  --color-primary-200: #f48fb1;
  --color-primary-300: #f06292;
  --color-primary-400: #ec407a;
  --color-primary-500: #e91e62;

  --color-card-title: #06132b;
  --color-card-subtitle: #6c757d;

  --theme-error-color: #ed4c78;

  --color-sidebar-background: rgba(0, 0, 0, 0.1);
  --icon-background: rgba(255, 255, 255, 0.1);

  --color-catskill-white: #f9fafc;
  --color-highlights-success: #36b37e;
  --color-highlights-error: #de350b;
  --color-spindle: #ccd9ee;

  --color-target-bg: #fcfcfc;

  --color-stroke: rgba(115, 143, 179, 0.2);

  --color-table-row: #f4f6ff;

  --loader-gradient: linear-gradient(
    -45deg,
    #e5e9ef,
    #f0f0f0,
    #e5e9ef,
    #f0f0f0
  );

  --loader-gradient-alt: linear-gradient(
    -45deg,
    #e5e9ef,
    #e0e3e8,
    #e5e9ef,
    #e0e3e8
  );

  --spacing-1x: 0.25rem;
  --spacing-2x: 0.5rem;
  --spacing-3x: 0.75rem;
  --spacing-4x: 1rem;
  --spacing-5x: 1.25rem;
  --spacing-6x: 1.5rem;
  --spacing-7x: 1.75rem;
  --spacing-8x: 2rem;
  --spacing-9x: 2.25rem;
  --spacing-10x: 2.5rem;
  --spacing-11x: 2.75rem;
  --spacing-12x: 3rem;
  --spacing-13x: 3.25rem;
  --spacing-14x: 3.5rem;
  --spacing-15x: 3.75rem;
  --spacing-16x: 4rem;
  --spacing-18x: 5rem;
  --spacing-21x: 5.25rem;
  --spacing-22x: 5.75rem;
  --spacing-26x: 6.5rem;
  --spacing-29x: 7.25rem;
  --spacing-33x: 8.25rem;
  --spacing-39x: 9.75rem;
  --spacing-50x: 12.5rem;
  --spacing-60x: 15rem;

  --dialog-width: 605px;
  --dialog-width-1000: 1000px;

  --boxShadow-light: 1px 1px 4px 1px rgba(0, 0, 0, 0.1);
  --boxShadow-table: 0px 0px 2px rgba(0, 0, 0, 0.102874);
  --boxShadow-iron-drop-down: 0 3px 6px rgba(0, 0, 0, 0.16),
    0 3px 6px rgba(0, 0, 0, 0.23), 0 0 6px rgba(0, 0, 0, 0.23);
  --boxShadow-table-heading: 0px -1px 0px #eff2f7, 0px 1px 0px #eff2f7;
  --boxShadow-delScreening-cards: 0px 1px 5px rgba(0, 0, 0, 0.2),
    0px 3px 1px rgba(0, 0, 0, 0.12), 0px 2px 2px rgba(0, 0, 0, 0.14);
  --boxShadow-capsule: 0px 2px 8px rgba(60, 64, 67, 0.1),
    0px 1px 3px rgba(60, 64, 67, 0.2);

  --boxShadow-1dp: 0px 1px 3px rgba(0, 0, 0, 0.12),
    0px 1px 1px rgba(0, 0, 0, 0.14), 0px 2px 1px rgba(0, 0, 0, 0.2);

  --boxShadow-2dp: 0px 1px 5px rgba(0, 0, 0, 0.12),
    0px 3px 1px rgba(0, 0, 0, 0.2), 0px 2px 2px rgba(0, 0, 0, 0.14);
  --box-shadow-3dp: 0px 1px 8px rgba(0, 0, 0, 0.2),
    0px 3px 3px rgba(0, 0, 0, 0.14), 0px 3px 4px rgba(0, 0, 0, 0.12);
  --boxShadow-selected-item: inset 0px -1px 0px #e0e0e0,
    inset 4px 0px 0px #304ffe;
  --boxShadow-tab-bar: inset -1px 0px 2px rgba(0, 0, 0, 0.1);
  --boxShadow-green-dot: 0px 0px 0px 2px var(--color-darkGrey),
    0px 0px 0px 5px var(--color-green);
  --boxShadow-6dp: 0px 3px 5px rgba(0, 0, 0, 0.2),
    0px 1px 18px rgba(0, 0, 0, 0.12), 0px 6px 10px rgba(0, 0, 0, 0.14);

  --boxShadow-card: 0px 1px 3px rgba(115, 143, 179, 0.12),
    0px 1px 1px rgba(115, 143, 179, 0.14), 0px 2px 1px rgba(115, 143, 179, 0.2);

  --button-boxShadow: 0px 2px 2px rgba(0, 0, 0, 0.14),
    0px 3px 1px rgba(0, 0, 0, 0.2), 0px 1px 5px rgba(0, 0, 0, 0.12);

  --gutter-main: 1rem;

  --style-none: none;

  --border-radius-4: 4px;

  --fontWeight-thin: 300;
  --fontWeight-normal: 400;
  --fontWeight-semibold: 500;
  --fontWeight-bold: 600;
  --fontWeight-black: 700;
  --fontWeight-extrablack: 900;

  --font-xxs: 0.5rem;
  --font-xs: 0.625rem;
  --font-s: 0.75rem;
  --font-md: 0.875rem;
  --font-main: 1rem;
  --font-lg: 1.125rem;
  --font-xlg: 1.25rem;
  --font-xxlg: 1.5rem;

  --color-primary-200: #f48fb1;
  --color-primary-300: #f06292;
  --color-primary-400: #ec407a;
  --color-primary-500: #e91e62;

  --color-pineapple: #f8db02;

  --color-reference-heading: #304ffe;
  --color-reference-content: #6c757d;
  --color-reference-border: #dde1ee;

  --color-dashboard-panel: #5366d4;

  --color-list-background: #eaebff;

  --color-success: #36b37e;
  --color-error: #de350b;

  --color-background-success: rgba(54, 179, 126, 0.1);
  --color-background-error: rgba(222, 53, 11, 0.1);

  --color-table-header: #f1f4f5;

  --progress-bar-background: #eff2f7;
  --progress-bar-complete: #66bb6a;
  --progress-bar-loading: #f7b500;

  --create-container-background: #10a880;
  --view-container-template: #2b72e6;

  /* width */
  --width-120: 120px;
  --width-300: 300px;
  --width-500: 500px;
  --width-1000: 1000px;

  --height-300: 300px;
  --height-448: 448px;
}