:root {
  /* Color variables */
  --white: #fff;
  --black: #1a202c;

  --neutral-100: #f7fafc;
  --neutral-200: #edf2f7;
  --neutral-300: #e2e8f0;
  --neutral-400: #cbd5e0;
  --neutral-500: #a0aec0;
  --neutral-600: #718096;
  --neutral-700: #4a5568;
  --neutral-800: #2d3748;
  --neutral-900: #1a202c;

  --primary-100: #e6efff;
  --primary-200: #b3cefe;
  --primary-300: #85b0fe;
  --primary-400: #5c96fd;
  --primary-500: #377efd;
  --primary-600: #1266fd;
  --primary-700: #0256ec;
  --primary-800: #024cd0;
  --primary-900: #0243b7;

  --info-100: #e6efff;
  --info-200: #b3cefe;
  --info-300: #85b0fe;
  --info-400: #5c96fd;
  --info-500: #377efd;
  --info-600: #1266fd;
  --info-700: #0256ec;
  --info-800: #024cd0;
  --info-900: #0243b7;

  --danger-100: #faeae6;
  --danger-200: #ffd2c8;
  --danger-300: #ffb09f;
  --danger-400: #ff9179;
  --danger-500: #ff7557;
  --danger-600: #ff5c38;
  --danger-700: #fc2e00;
  --danger-800: #cc2500;
  --danger-900: #a61e00;

  --success-100: #f0fff4;
  --success-200: #c6f6d5;
  --success-300: #9ae6b4;
  --success-400: #68d391;
  --success-500: #48bb78;
  --success-600: #38a169;
  --success-700: #2f855a;
  --success-800: #276749;
  --success-900: #22543d;

  --warning-100: #fffbea;
  --warning-200: #fff3c4;
  --warning-300: #fce588;
  --warning-400: #fadb5f;
  --warning-500: #f7c948;
  --warning-600: #f0b429;
  --warning-700: #cb6e17;
  --warning-800: #b44d12;
  --warning-900: #8d2b0b;

  --teal-100: #b5f5ef;
  --teal-200: #87efe5;
  --teal-300: #5fe9dc;
  --teal-400: #3ce4d4;
  --teal-500: #1fddcb;
  --teal-600: #1bbeaf;
  --teal-700: #17a396;
  --teal-800: #148c81;
  --teal-900: #11786f;

  --indigo-100: #d2ccfc;
  --indigo-200: #b9b0fb;
  --indigo-300: #a296f9;
  --indigo-400: #8c7df8;
  --indigo-500: #7866f7;
  --indigo-600: #644ff6;
  --indigo-700: #5139f5;
  --indigo-800: #3f25f4;
  --indigo-900: #2f12f3;

  /* text-size */
  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-lg: 1.125rem;
  --text-xl: 1.25rem;
  --text-2xl: 1.5rem;
  --text-3xl: 1.875rem;
  --text-4xl: 2.25rem;
  --text-5xl: 3rem;
  --text-6xl: 4rem;

  /* text weight */
  --bold: 600;
  --semibold: 500;
  --regular: 400;

  /* Border-radius */
  --rounded-sm: 0.125rem;
  --rounded: 0.25rem;
  --rounded-md: 0.375rem;
  --rounded-lg: 0.5rem;
  --rounded-full: 9999px;

  /* border */
  --border-size: 1px;
  --border-color: var(--neutral-500);
  --border: var(--border-size) solid var(--border-color);

  /* shadows */
  --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.2);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
  --shadow-inner: inset 0 2px 4px 0 rgba(0, 0, 0, 0.06);
  --shadow-outline: 0 0 0 3px rgba(55, 126, 253, 0.5);
  --shadow-outline-light: 0 0 0 3px rgba(133, 176, 254, 0.5);
  --shadow-outline-inner: inset 0 0 0 3px rgba(55, 126, 253, 0.5);
  --shadow-outline-info: 0 0 0 3px rgba(55, 126, 253, 0.5);
  --shadow-outline-neutral: 0 0 0 3px rgba(160, 174, 192, 0.5);
  --shadow-outline-teal: 0 0 0 3px rgba(31, 221, 203, 0.5);
  --shadow-outline-danger: 0 0 0 3px rgba(255, 92, 56, 0.5);
  --shadow-outline-warning: 0 0 0 3px rgba(247, 201, 72, 0.5);
  --shadow-outline-inset: inset 0 0 0 calc(2px) rgba(164, 202, 254, 0.7);

  /* App vars */
  --header-height: 58px;

  /* focus  */
  --focus-outline-style: 2px solid var(--neutral-800);
  --focus-outline-offset: 2px;

  /* link color */
  --link-color: var(--primary-600);
  --link-color--hover: var(--primary-900);
}