:root {
  /* COLORS */
  --base-color-primary: #58c14b;
  --base-color-primary-hover: #58c14b;
  --base-color-primary-contrast: white;

  --base-color-white: white;
  --base-color-black: black;

  --base-color-focus: #83b6fb;
  --base-focus: 0px 0px 0px 3px var(--base-color-focus);

  --base-color-success-hue: 130;
  --base-color-success: hsl(var(--base-color-success-hue), 48%, 80%);
  --base-color-success-hover: hsl(var(--base-color-success-hue), 48%, 75%);
  --base-color-success-contrast: hsl(var(--base-color-success-hue), 48%, 20%);

  --base-color-warning-hue: 46;
  --base-color-warning: hsl(var(--base-color-warning-hue), 70%, 80%);
  --base-color-warning-hover: hsl(var(--base-color-warning-hue), 70%, 75%);
  --base-color-warning-contrast: hsl(var(--base-color-warning-hue), 48%, 25%);

  --base-color-danger-hue: 349;
  --base-color-danger: hsl(var(--base-color-danger-hue), 70%, 80%);
  --base-color-danger-hover: hsl(var(--base-color-danger-hue), 70%, 75%);
  --base-color-danger-contrast: hsl(var(--base-color-danger-hue), 48%, 30%);

  --base-color-ui: #eee;
  --base-color-ui-weak: #fafafa;
  --base-color-ui-strong: #efefef;

  --base-color-font: #30353b;
  --base-color-font-weak: #30353b;
  --base-color-font-strong: #30353b;
  --base-color-font-heading: #30353b;

  /* SIZES */
  --base-font-family: "Poppins", sans-serif;
  --base-font-size-sm: 15px;
  --base-font-size-md: 16px;
  --base-font-size-lg: 20px;
  --base-font-size-xl: 64px;
  --base-font-size-xxl: 34px;

  --base-space-unit: 1em;
  --base-space-xxs: calc(var(--base-space-unit) * 0.25);
  --base-space-xs: calc(var(--base-space-unit) * 0.5);
  --base-space-sm: calc(var(--base-space-unit) * 0.75);
  --base-space-md: calc(var(--base-space-unit) * 1);
  --base-space-lg: calc(var(--base-space-unit) * 1.5);
  --base-space-xl: calc(var(--base-space-unit) * 3.25);
  --base-space-xxl: calc(var(--base-space-unit) * 5.25);

  --base-container: 800px;
  --base-container-xxs: 300px;
  --base-container-xs: 600px;
  --base-container-sm: 800px;
  --base-container-md: 1000px;
  --base-container-lg: 1200px;
  --base-container-xl: 1400px;

  --base-border-width-sm: 1px;
  --base-border-width-md: 2px;
  --base-border-width-lg: 3px;
  --base-border-width-default: var(--base-border-width-md);

  --base-border-radius-xs: 2px;
  --base-border-radius-sm: 4px;
  --base-border-radius-md: 8px;
  --base-border-radius-lg: 16px;
  --base-border-radius-xl: 32px;
  --base-border-radius-default: var(--base-border-radius-sm);

  --base-element-height-xs: 1.5rem;
  --base-element-height-sm: 1.8rem;
  --base-element-height-md: 2.4rem;
  --base-element-height-lg: 3.2rem;
  --base-element-height-xl: 4rem;
  --base-element-height-default: var(--base-element-height-md);

  /* DEPTH */
  --base-depth-none: none;
  --base-depth-xs: 0px 1px 1px 0px rgba(9, 30, 66, 0.06),
    0px 2px 4px 0px rgba(9, 30, 66, 0.15);
  --base-depth-sm: 0px 2px 2px 0px rgba(9, 30, 66, 0.06),
    0px 4px 8px -2px rgba(9, 30, 66, 0.25);
  --base-depth-md: 0px 2px 2px 0px rgba(9, 30, 66, 0.06),
    0px 8px 16px -4px rgba(9, 30, 66, 0.25);
  --base-depth-lg: 0px 4px 4px 0px rgba(9, 30, 66, 0.06),
    0px 12px 24px -6px rgba(9, 30, 66, 0.25);
  --base-depth-xl: 0px 6px 6px 0px rgba(9, 30, 66, 0.1),
    0px 20px 32px -8px rgba(9, 30, 66, 0.25);
}

@media (min-width: 800px) {
  :root {
    --base-font-size-sm: 16px;
    --base-font-size-md: 20px;
    --base-font-size-lg: 30px;
    --base-font-size-xl: 64px;
    --base-font-size-xxl: 75px;
  }
}