/*
Font size system (px)
10 / 12 / 14 / 16 / 18 / 20 / 24 / 30 / 36 / 44 / 52 / 62 / 74 / 86 / 98
*/

/*
Spacing system (px)
2 / 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 80 / 96 / 128
*/

:root {
  /* Colors */
  --color-primary: #27d068;
  --color-primary-light: #29d068;
  --color-primary-dark: #23bb5e;

  --color-secondary: #142c33;
  --color-secondary-alpha: rgba(20, 44, 51, 0.03);
  --color-secondary-alpha-hover: rgba(20, 44, 51, 0.08);
  --color-secondary-light: #5b6b70;
  --color-tertiary: #f9feea;

  --color-quaternary: #ed7e40;
  --color-quaternary-alpha: rgba(241, 102, 24, 0.03);
  --color-quaternary-alpha-hover: rgba(241, 102, 24, 0.08);
  --color-accent: #2663e5;
  --color-accent-light: #6792ed;
  --color-accent-alpha: rgba(115, 159, 255, 0.1);

  --color-white: #fff;
  --color-indicator: #e85c41;
  --color-subheading: #2b7534;
  --color-subheading-alpha: #64cd721a;
  --color-gradient-accent: #0f143d;

  --color-light-grey: #f6f9fb;
  --color-light-grey--1: #f1f5f9;
  --color-light-grey--2: #e2ebf4;
  --color-light-grey--3: #939ba3;
  --color-text-complementary: #6f6c90;
  --color-background-complementary: #17242f;
  --color-tag: #f3f4f6cc;

  /* Box shadow */
  --shadow-light: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.02);
  --shadow-medium: 0 0.5rem 2.4rem rgba(0, 0, 0, 0.07);
  --shadow-dark: 0 2.4rem 4.8rem rgba(0, 0, 0, 0.08);

  /* Line height */
  --lheight-body: 1.7;
  --lheight-heading--1: 1.2;
  --lheight-heading--2: 1.1;
  --lheight-subheading: 1.5;
  --lheight-footer: 2;

  /* Border radius */
  --radius-circle: 50%;
  --radius-small: 0.8rem;
  --radius-default: 3rem;
  --radius-medium: 5rem;
  --radius-large: 9rem;
  --radius-img--blog: var(--radius-default);

  /* Font style */
  --font-alaska: 'alaska', sans-serif;
  --font-arial: 'arial', sans-serif;

  /* Font size */
  --font-small: 1.2rem;
  --font-default: 1.4rem;
  --font-heading--1: 6.2rem;
  --font-heading--2: 5.2rem;
  --font-heading--3: 4.4rem;
  --font-heading--4: 1.8rem;

  /* Font weight */
  --weight-default: 300;
  --weight-normal: 400;
  --weight-medium: 500;
  --weight-bold: 600;

  /* Letter Spacing */
  --space-subheading: 0.01rem;
  --space-heading: -0.1rem;

  /* Margin */
  --margin-negative: -1.5rem;
  --margin-list: 0.5rem;
  --margin-small: 1rem;
  --margin-default: 2rem;
  --margin-normal: 3rem;
  --margin-large: 9.6rem;

  --margin-simulator: 4.2rem auto;
  --margin-hero-img: var(--height-header);

  /* Padding */
  --padding-section: 9.6rem 0;
  --padding-section-small: 6.4rem 0;

  --padding-xsmall: 0.2rem;
  --padding-small: 1rem;
  --padding-normal: 3rem;
  --padding-medium: 5rem;
  --padding-large: 12.8rem;

  --padding-banner: 0.7rem 0 0.5rem;
  --padding-button: 0.8rem 2.5rem;
  --padding-form-button: 1.1rem 2.5rem;
  --padding-subheading: 0.5rem 1.8rem;
  --padding-link: 1rem 1.5rem;
  --padding-hero-textbox: 9.6rem 12rem 0 0;
  --padding-form-textbox: 4.8rem 6.4rem 3.2rem;
  --padding-card-content: 2rem 2.5rem 3rem;

  /* Gaps */
  --gap-xsmall: 0.5rem;
  --gap-small: 1rem;
  --gap-normal: 3rem;
  --gap-medium: 5rem;
  --gap-large: 16rem;

  /* Borders */
  --border-header: rgb(238, 238, 238);
  --border-footer: 0.1rem solid #293b49;
  --border-default: 0.1rem solid rgba(128, 128, 128, 0.15);
  --border-hover: 0.1rem solid #27d068;
  --border-transparent: 0.1rem solid transparent;

  /* Themes */
  --text-paragraph: var(--color-secondary-light);
  --transition-default: all 0.3s;
  --height-header: 13rem;

  /* Sizes */
  --size-icon-default: 1.5rem;
  --size-icon-list: 1.3rem;
  --size-icon-bell: 2rem;
  --size-checkbox: 1.5rem;
  --logo-height-default: 4rem;
}