:root {
  --BASE: 16;

  --color-white: #FFFFFF;
  --color-black: #2D392F;

  --color-light: #F0F6F1;
  --color-dark: #6D806E;
  --color-darkener: rgba(0, 0, 0, .1);

  --color-red: #FF5858;
  --color-green: #75D175;
  --color-yellow: #FBA446;
  --color-blue: #6081FA;

  --color-primary: #19A675;

  --font-primary: "Inter", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, Aptos, Roboto, "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  --font-size-xs: calc(11 / var(--BASE) * 1rem);
  --font-size-sm: calc(12 / var(--BASE) * 1rem);
  --font-size-md: calc(14 / var(--BASE) * 1rem);
  --font-size-lg: calc(18 / var(--BASE) * 1rem);
  --font-size-xl: calc(22 / var(--BASE) * 1rem);
  --font-size-decorative: calc(36 / var(--BASE) * 1rem);

  --font-weight-normal: 400;
  --font-weight-bold: 550;
  --font-weight-heavy: 700;

  --line-height-sm: 1.2;
  --line-height-md: 1.5;
  --line-height-lg: 2;

  --letter-spacing-md: 0.075em;

  --spacing-screen: calc(1440 / var(--BASE) * 1rem);
  --spacing-xs: calc(6 / var(--BASE) * 1rem);
  --spacing-sm: calc(12 / var(--BASE) * 1rem);
  --spacing-md: calc(18 / var(--BASE) * 1rem);
  --spacing-lg: calc(24 / var(--BASE) * 1rem);
  --spacing-xl: calc(36 / var(--BASE) * 1rem);

  --spacing-sidebar: calc(256 / var(--BASE) * 1rem);

  --border-md: calc(2 / var(--BASE) * 1rem);
  --border-sm: calc(1 / var(--BASE) * 1rem);

  --radius-md: calc(8 / var(--BASE) * 1rem);
  --radius-pill: 999px;

  --shadow-md: 0 0 0 var(--border-sm) var(--color-black);

  --duration-sm: 0.1s;
  --duration-md: 0.3s;
  --duration-lg: 1s;
}