:root {
  --ublo-grey-000: #ffffff;
  --ublo-grey-100: #f5f5f5;
  --ublo-grey-200: #ededed;
  --ublo-grey-300: #d3d3d3;
  --ublo-grey-400: #7c7b7b;
  --ublo-grey-500: #383838;
  --ublo-grey-600: #1b1b1b;
  --ublo-grey-gradient: linear-gradient(
    175deg,
    var(--ublo-grey-500, #383838),
    var(--ublo-grey-600, #1b1b1b)
  );

  --ublo-red-100: #fde9e9;
  --ublo-red-200: #f9c5c5;
  --ublo-red-300: #f4aaaa;
  --ublo-red-400: #f26464;
  --ublo-red-500: #d55858;
  --ublo-red-gradient: linear-gradient(
    175deg,
    var(--ublo-red-400, #f26464),
    var(--ublo-red-500, #d55858)
  );

  --ublo-green-100: #e6f8f0;
  --ublo-green-200: #c3f1e0;
  --ublo-green-300: #bce5d1;
  --ublo-green-400: #4bde97;
  --ublo-green-500: #4ab292;
  --ublo-green-gradient: linear-gradient(
    175deg,
    var(--ublo-green-400, #4bde97),
    var(--ublo-green-500, #4ab292)
  );

  --ublo-yellow-100: #fff7e8;
  --ublo-yellow-200: #ffeec6;
  --ublo-yellow-300: #ffe8c6;
  --ublo-yellow-400: #ffb648;
  --ublo-yellow-500: #e2a445;
  --ublo-yellow-gradient: linear-gradient(
    175deg,
    var(--ublo-yellow-400, #ffb648),
    var(--ublo-yellow-500, #e2a445)
  );

  --ublo-blue-100: #e8f0fc;
  --ublo-blue-200: #d4e4fc;
  --ublo-blue-300: #adc5ea;
  --ublo-blue-400: #4177f6;
  --ublo-blue-500: #073ff8;
  --ublo-blue-gradient: linear-gradient(
    175deg,
    var(--ublo-blue-400, #4177f6),
    var(--ublo-blue-500, #073ff8)
  );

  --ublo-primary-color: var(--ublo-blue-500, #073ff8);
  --ublo-secondary-color: var(--ublo-blue-400, #4177f6);
  --ublo-light-color: var(--ublo-blue-100, #e8f0fc);

  --ublo-shadow-100: 0 5px 10px rgba(0, 0, 0, 0.12);
  --ublo-shadow-300: 0 5px 10px rgba(0, 0, 0, 0.24);

  --ublo-radius-100: 3px;
  --ublo-radius-200: 10px;
  --ublo-radius-300: 15px;
  --ublo-radius-400: 20px;

  --ublo-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
}