:root {
  /**
  * GRAY TONES
  * Inspired by the tailwind "Neutral" pallette.
  */
  --black: #000;
  --gray-50: #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;
  --gray-950: #0a0a0a;
  --white: #fff;

  --black-semi: #000000b9;
  --gray-50-semi: #fafafab9;
  --gray-100-semi: #f5f5f5b9;
  --gray-200-semi: #e5e5e5b9;
  --gray-300-semi: #d4d4d4b9;
  --gray-400-semi: #a3a3a3b9;
  --gray-500-semi: #737373b9;
  --gray-600-semi: #525252b9;
  --gray-700-semi: #404040b9;
  --gray-800-semi: #262626b9;
  --gray-900-semi: #171717b9;
  --gray-950-semi: #0a0a0ab9;
  --white-semi: #ffffffb9;

  /**
  * COLORS
  */
  --primary: var(--color);
  --success: #94e337;

  /*
  * FONTS
  */
  --font-family: 'Hanken Grotesk', sans-serif;
  --font-family-serif: 'IBM Plex Serif', serif;
  --font-base: 16px;
  --font-weight: 400;
  --font-weight-bold: 500;
  --text-transform: none;

  /*
  * UI ELEMENTS
  */
  --ui-font-family: Carbon, monospace;
  --ui-font-size: 13px;
  --ui-text-transform: uppercase;
  --ui-font-weight: 400;
  --ui-placeholder-color: var(--gray-z-5);

  /*
  * BORDERS
  */
  --border-color: var(--gray-z-2);
  --border-color-highlight: var(--gray-z-3);

  /*
  * COMPONENTS
  */
  --button-background-highlight: var(--gray-z-1);
  --button-border-color-highlight: var(--gray-z-3);
  --card-border-color-highlight: var(--gray-z-3);

  --card-background-highlight: var(--gray-z-1);
  --card-border-color-highlight: var(--gray-z-3);

  --image-loading-background: var(--gray-z-0);
  --image-border-radius: var(--size-1);
}