:root {
  /******************
  Colors variables
  ******************/

  /* Gray alpha (light mode) */
  --tt-gray-light-a-50: rgba(64, 64, 64, 0.04);
  --tt-gray-light-a-100: rgba(23, 30, 44, 0.05);
  --tt-gray-light-a-200: rgba(45, 47, 53, 0.1);
  --tt-gray-light-a-300: rgba(55, 58, 63, 0.2);
  --tt-gray-light-a-400: rgba(48, 52, 59, 0.42);
  --tt-gray-light-a-500: rgba(60, 63, 68, 0.64);
  --tt-gray-light-a-600: rgba(44, 47, 54, 0.78);
  --tt-gray-light-a-700: rgba(43, 45, 50, 0.87);
  --tt-gray-light-a-800: rgba(38, 40, 44, 0.95);
  --tt-gray-light-a-900: rgba(37, 38, 40, 0.98);

  /* Gray (light mode) */
  --tt-gray-light-50: rgba(250, 250, 250, 1);
  --tt-gray-light-100: rgba(244, 244, 245, 1);
  --tt-gray-light-200: rgba(234, 234, 235, 1);
  --tt-gray-light-300: rgba(219, 220, 221, 1);
  --tt-gray-light-400: rgba(172, 173, 177, 1);
  --tt-gray-light-500: rgba(131, 133, 136, 1);
  --tt-gray-light-600: rgba(89, 92, 96, 1);
  --tt-gray-light-700: rgba(70, 71, 75, 1);
  --tt-gray-light-800: rgba(50, 51, 54, 1);
  --tt-gray-light-900: rgba(40, 41, 43, 1);

  /* Gray alpha (dark mode) */
  --tt-gray-dark-a-50: rgba(238, 238, 255, 0.05);
  --tt-gray-dark-a-100: rgba(237, 237, 249, 0.07);
  --tt-gray-dark-a-200: rgba(244, 244, 252, 0.11);
  --tt-gray-dark-a-300: rgba(245, 245, 251, 0.22);
  --tt-gray-dark-a-400: rgba(250, 250, 255, 0.37);
  --tt-gray-dark-a-500: rgba(242, 244, 255, 0.5);
  --tt-gray-dark-a-600: rgba(253, 253, 255, 0.64);
  --tt-gray-dark-a-700: rgba(255, 255, 255, 0.75);
  --tt-gray-dark-a-800: rgba(255, 255, 255, 0.88);
  --tt-gray-dark-a-900: rgba(255, 255, 255, 0.96);

  /* Gray (dark mode) */
  --tt-gray-dark-50: rgba(31, 31, 32, 1);
  --tt-gray-dark-100: rgba(38, 38, 40, 1);
  --tt-gray-dark-200: rgba(51, 51, 53, 1);
  --tt-gray-dark-300: rgba(76, 76, 79, 1);
  --tt-gray-dark-400: rgba(105, 105, 111, 1);
  --tt-gray-dark-500: rgba(130, 130, 137, 1);
  --tt-gray-dark-600: rgba(169, 169, 174, 1);
  --tt-gray-dark-700: rgba(198, 198, 201, 1);
  --tt-gray-dark-800: rgba(230, 230, 231, 1);
  --tt-gray-dark-900: rgba(245, 245, 245, 1);

  /* Brand colors */
  --tt-brand-color-50: rgba(243, 242, 255, 1);
  --tt-brand-color-100: rgba(226, 223, 255, 1);
  --tt-brand-color-200: rgba(199, 193, 255, 1);
  --tt-brand-color-300: rgba(161, 142, 255, 1);
  --tt-brand-color-400: rgba(126, 86, 255, 1);
  --tt-brand-color-500: rgba(102, 45, 255, 1);
  --tt-brand-color-600: rgba(88, 4, 233, 1);
  --tt-brand-color-700: rgba(79, 4, 208, 1);
  --tt-brand-color-800: rgba(60, 4, 157, 1);
  --tt-brand-color-900: rgba(47, 29, 106, 1);
  --tt-brand-color-950: hsla(257, 100%, 11%, 1);

  /* Green */
  --tt-color-green-inc-5: hsla(129, 100%, 98%, 1);
  --tt-color-green-inc-4: hsla(129, 100%, 93%, 1);
  --tt-color-green-inc-3: hsla(131, 100%, 87%, 1);
  --tt-color-green-inc-2: hsla(133, 98%, 79%, 1);
  --tt-color-green-inc-1: hsla(137, 99%, 71%, 1);
  --tt-color-green-base: hsla(147, 99%, 51%, 1);
  --tt-color-green-dec-1: hsla(147, 97%, 42%, 1);
  --tt-color-green-dec-2: hsla(146, 98%, 33%, 1);
  --tt-color-green-dec-3: hsla(146, 100%, 25%, 1);
  --tt-color-green-dec-4: hsla(144, 100%, 17%, 1);
  --tt-color-green-dec-5: hsla(140, 100%, 10%, 1);

  /* Yellow */
  --tt-color-yellow-inc-5: hsla(50, 100%, 98%, 1);
  --tt-color-yellow-inc-4: hsla(50, 100%, 92%, 1);
  --tt-color-yellow-inc-3: hsla(50, 100%, 85%, 1);
  --tt-color-yellow-inc-2: hsla(50, 100%, 78%, 1);
  --tt-color-yellow-inc-1: hsla(50, 100%, 69%, 1);
  --tt-color-yellow-base: hsla(52, 100%, 51%, 1);
  --tt-color-yellow-dec-1: hsla(52, 100%, 42%, 1);
  --tt-color-yellow-dec-2: hsla(52, 100%, 33%, 1);
  --tt-color-yellow-dec-3: hsla(52, 100%, 25%, 1);
  --tt-color-yellow-dec-4: hsla(51, 100%, 17%, 1);
  --tt-color-yellow-dec-5: hsla(50, 100%, 10%, 1);

  /* Red */
  --tt-color-red-inc-5: hsla(11, 100%, 97%, 1);
  --tt-color-red-inc-4: hsla(11, 100%, 89%, 1);
  --tt-color-red-inc-3: hsla(10, 100%, 81%, 1);
  --tt-color-red-inc-2: hsla(9, 100%, 74%, 1);
  --tt-color-red-inc-1: hsla(7, 100%, 65%, 1);
  --tt-color-red-base: hsla(7, 100%, 55%, 1);
  --tt-color-red-dec-1: hsla(7, 100%, 42%, 1);
  --tt-color-red-dec-2: hsla(5, 100%, 33%, 1);
  --tt-color-red-dec-3: hsla(4, 100%, 25%, 1);
  --tt-color-red-dec-4: hsla(3, 100%, 17%, 1);
  --tt-color-red-dec-5: hsla(1, 100%, 10%, 1);

  /* Basic colors */
  --white: rgba(255, 255, 255, 1);
  --black: rgba(20, 20, 23, 1);
  --transparent: rgba(255, 255, 255, 0);

  /******************
  Shadow variables
  ******************/

  --tt-shadow-elevated-md:
    0px 16px 48px 0px rgba(25, 32, 47, 0.04),
    0px 12px 24px 0px rgba(25, 32, 47, 0.04),
    0px 6px 8px 0px rgba(25, 32, 47, 0.02),
    0px 2px 3px 0px rgba(25, 32, 47, 0.02);

  /**************************************************
       Radius variables
    **************************************************/

  --tt-radius-xxs: 0.125rem;
  --tt-radius-xs: 0.25rem;
  --tt-radius-sm: 0.375rem;
  --tt-radius-md: 0.5rem;
  --tt-radius-lg: 0.75rem;
  --tt-radius-xl: 1rem;

  /**************************************************
       Transition variables
    **************************************************/

  --tt-transition-duration-short: 0.1s;
  --tt-transition-duration-default: 0.2s;
  --tt-transition-duration-long: 0.64s;
  --tt-transition-easing-default: cubic-bezier(0.46, 0.03, 0.52, 0.96);
  --tt-transition-easing-cubic: cubic-bezier(0.65, 0.05, 0.36, 1);
  --tt-transition-easing-quart: cubic-bezier(0.77, 0, 0.18, 1);
  --tt-transition-easing-circ: cubic-bezier(0.79, 0.14, 0.15, 0.86);
  --tt-transition-easing-back: cubic-bezier(0.68, -0.55, 0.27, 1.55);

  /******************
  Contrast variables
  ******************/

  --tt-accent-contrast: 8%;
  --tt-destructive-contrast: 8%;
  --tt-foreground-contrast: 8%;
}

:root {
  /**************************************************
      Global colors
  **************************************************/

  /* Global colors - Light mode */
  --tt-bg-color: var(--white);
  --tt-border-color: var(--tt-gray-light-a-200);
  --tt-border-color-tint: var(--tt-gray-light-a-100);
  --tt-sidebar-bg-color: var(--tt-gray-light-100);
  --tt-scrollbar-color: var(--tt-gray-light-a-200);
  --tt-cursor-color: var(--tt-brand-color-500);
  --tt-selection-color: rgba(161, 142, 255, 0.2);
  --tt-card-bg-color: var(--white);
  --tt-card-border-color: var(--tt-gray-light-a-100);
}

/* Global colors - Dark mode */
.dark {
  --tt-bg-color: var(--black);
  --tt-border-color: var(--tt-gray-dark-a-200);
  --tt-border-color-tint: var(--tt-gray-dark-a-100);
  --tt-sidebar-bg-color: var(--tt-gray-dark-100);
  --tt-scrollbar-color: var(--tt-gray-dark-a-200);
  --tt-cursor-color: var(--tt-brand-color-400);
  --tt-selection-color: rgba(126, 86, 255, 0.2);
  --tt-card-bg-color: var(--tt-gray-dark-50);
  --tt-card-border-color: var(--tt-gray-dark-a-50);

  --tt-shadow-elevated-md:
    0px 16px 48px 0px rgba(6, 6, 6, 0.5),
    0px 12px 24px 0px rgba(6, 6, 6, 0.24),
    0px 6px 8px 0px rgba(6, 6, 6, 0.22),
    0px 2px 3px 0px rgba(6, 6, 6, 0.12);
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

@keyframes fadeOut {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}

@keyframes zoomIn {
  from {
    transform: scale(0.95);
  }
  to {
    transform: scale(1);
  }
}

@keyframes zoomOut {
  from {
    transform: scale(1);
  }
  to {
    transform: scale(0.95);
  }
}

@keyframes slideFromTop {
  from {
    transform: translateY(-0.5rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes slideFromRight {
  from {
    transform: translateX(0.5rem);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideFromLeft {
  from {
    transform: translateX(-0.5rem);
  }
  to {
    transform: translateX(0);
  }
}

@keyframes slideFromBottom {
  from {
    transform: translateY(0.5rem);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

[data-floating-ui-portal] {
  z-index: 9999;
}