:root {
  /* Core units
     ================================================================= */
  --base-unit: 0.25rem;
  --base-half-unit: calc(var(--base-unit) / 2);
  /* Typography
    ================================================================= */
  /* Fonts */
  --font-family-primary: "Lexend", "Open Sans", "Segoe UI", "Roboto",
    "Lucida Sans", "Lucida Sans Regular", "Lucida Grande", "Lucida Sans Unicode",
    Geneva, Verdana, "Arial", sans-serif;
  --font-family-secondary: serif;
  --font-base-unit: var(--base-unit);
  /* Font sizes - 4x4 grid */
  --font-size-12: calc(var(--font-base-unit) * 3);
  --font-size-16: calc(var(--font-base-unit) * 4);
  --font-size-20: calc(var(--font-base-unit) * 5);
  --font-size-24: calc(var(--font-base-unit) * 6);
  --font-size-32: calc(var(--font-base-unit) * 8);
  --font-size-40: calc(var(--font-base-unit) * 10);
  --font-size-48: calc(var(--font-base-unit) * 12);
  --font-size-64: calc(var(--font-base-unit) * 16);
  --line-height-base-unit: 1;
  /* Line heights */
  --line-height-small: calc(var(--line-height-base-unit) * 1.1);
  --line-height-medium: calc(var(--line-height-base-unit) * 1.3);
  --line-height-large: calc(var(--line-height-base-unit) * 1.5);
  /* Font weights */
  --font-weight-lighter: 100;
  --font-weight-light: 200;
  --font-weight-normal: 400;
  --font-weight-bold: 700;
  --font-weight-bolder: 900;
  /* Space
     ================================================================= */
  --space-base-unit: var(--base-unit);
  /* Margin, Padding - 8x8 grid */
  --space-8: calc(var(--space-base-unit) * 2);
  --space-16: calc(var(--space-base-unit) * 4);
  --space-24: calc(var(--space-base-unit) * 6);
  --space-32: calc(var(--space-base-unit) * 8);
  --space-40: calc(var(--space-base-unit) * 10);
  --space-48: calc(var(--space-base-unit) * 12);
  --space-56: calc(var(--space-base-unit) * 14);
  --space-64: calc(var(--space-base-unit) * 16);
  --space-80: calc(var(--space-base-unit) * 20);
  /* Breakpoints
     ================================================================= */
  --breakpoint-xsmall: 468px;
  /* --breakpoint-small: 544px; */
  --breakpoint-medium: 768px;
  --breakpoint-large: 1012px;
  /* Color
     ================================================================= */
  --color-primary-lighter: #484848;
  --color-primary-light: #303030;
  --color-primary: #222222;
  --color-primary-dark: #090909;
  --color-primary-darker: #080808;
  --color-secondary-ligher: #fefbf1;
  --color-secondary-light: #fefbf0;
  --color-secondary: #fffbef;
  --color-secondary-dark: #ffeebc;
  --color-secondary-darker: #fee28f;
  --color-gray-1: #ffffff;
  --color-gray-2: #efeff4;
  --color-gray-3: #d5d5d5;
  --color-gray-4: #bbbbbb;
  --color-gray-5: #a1a1a1;
  --color-gray-6: #888888;
  --color-gray-7: #6f6f6f;
  --color-gray-8: #555555;
  --color-gray-9: #3c3c3c;
  --color-gray-10: #262626;
  --color-purple: #4741de;
  --color-lavender: #e5e4ff;
  --color-red: #ff0000;
  --color-red-light: #ffbaba;
  --color-green: #dff2bf;
  /* Border
     ================================================================= */
  /* Border color */
  --border-color-lighter: var(--gray-2);
  --border-color-light: var(--gray-3);
  --border-color: var(--gray-5);
  --border-color-dark: var(--gray-7);
  --border-color-darker: var(--color-gray-9);

  /* Border radius */
  --border-radius-small: calc(var(--base-unit) * 1);
  --border-radius-medium: calc(var(--base-unit) * 2);
  --border-radius-large: calc(var(--base-unit) * 2);
  --border-radius-pill: calc(var(--base-unit) * 20);
  /* Transition
     ================================================================= */
  --transition-faster: 0.1s;
  --transition-fast: 0.2s;
  --transition-normal: 0.3s;
  --transition-slow: 0.4s;
  --transition-slower: 0.5s;

  /* Normal mode */
  --font-color-dark: black;
  --font-color-light: white;
  --background-dark: var(--color-gray-10);
  --accent-background-dark: var(--color-purple);
  --accent-background-light: var(--color-lavender);
  --form-input-bg-color: var(--color-gray-2);
  --form-select-caret-color: var(--color-gray-9);
  --color-invalid: var(--color-red);
  --color-invalid-bg: var(--color-red-light);
  --color-success: var(--color-green);

  /* Heights */
  --header-height: calc(var(--base-unit) * 18);

  /* Forms */
  --caret-dimension: calc(var(--base-unit) * 1.25);
}