:root {
  /* Duração das transições */
  --transition-duration-75: 75ms;
  --transition-duration-100: 100ms;
  --transition-duration-150: 150ms;
  --transition-duration-200: 200ms;
  --transition-duration-300: 300ms;
  --transition-duration-400: 400ms;
  --transition-duration-500: 500ms;
  --transition-duration-700: 700ms;
  --transition-duration-1000: 1000ms;
  --transition-duration-2000: 2000ms;

  /* Timing functions */
  --transition-timing-ease: ease;
  --transition-timing-ease-in: ease-in;
  --transition-timing-ease-out: ease-out;
  --transition-timing-ease-in-out: ease-in-out;
  --transition-timing-linear: linear;

  /* Transições padrão */
  --transition-all: all var(--transition-duration-normal) var(--transition-timing-ease);
  --transition-opacity: opacity var(--transition-duration-normal) var(--transition-timing-ease);
  --transition-transform: transform var(--transition-duration-normal) var(--transition-timing-ease);
  --transition-colors: background-color var(--transition-duration-normal) var(--transition-timing-ease),
                      border-color var(--transition-duration-normal) var(--transition-timing-ease),
                      color var(--transition-duration-normal) var(--transition-timing-ease);
}

/* Classes de duração */
.duration-75 { transition-duration: var(--transition-duration-75); }
.duration-100 { transition-duration: var(--transition-duration-100); }
.duration-150 { transition-duration: var(--transition-duration-150); }
.duration-200 { transition-duration: var(--transition-duration-200); }
.duration-300 { transition-duration: var(--transition-duration-300); }
.duration-500 { transition-duration: var(--transition-duration-500); }
.duration-700 { transition-duration: var(--transition-duration-700); }
.duration-1000 { transition-duration: var(--transition-duration-1000); }

/* Classes de timing function */
.ease { transition-timing-function: var(--transition-timing-ease); }
.ease-in { transition-timing-function: var(--transition-timing-ease-in); }
.ease-out { transition-timing-function: var(--transition-timing-ease-out); }
.ease-in-out { transition-timing-function: var(--transition-timing-ease-in-out); }
.linear { transition-timing-function: var(--transition-timing-linear); }

/* Classes de transição para propriedades específicas */
.transition-all { transition-property: all; }
.transition-colors { transition-property: background-color, border-color, color, fill, stroke; }
.transition-opacity { transition-property: opacity; }
.transition-shadow { transition-property: box-shadow; }
.transition-transform { transition-property: transform; }

/* Classes de hover com transição */
.hover-scale {
  transition-property: transform;
}
.hover-scale:hover {
  transform: scale(1.05);
}

.hover-opacity {
  transition-property: opacity;
}
.hover-opacity:hover {
  opacity: 0.8;
}

.hover-shadow {
  transition-property: box-shadow;
}
.hover-shadow:hover {
  box-shadow: var(--shadow-lg);
}

.hover-rotate {
  transition-property: transform;
}
.hover-rotate:hover {
  transform: rotate(5deg);
}

.hover-translate {
  transition-property: transform;
}
.hover-translate:hover {
  transform: translateY(-4px);
}

/* Classes combinadas para uso comum */
.animate-fade {
  transition: opacity var(--transition-duration-300) var(--transition-timing-ease-in-out);
  opacity: 0;
}
.animate-fade.show {
  opacity: 1;
}

.animate-slide-up {
  transition: transform var(--transition-duration-300) var(--transition-timing-ease-out);
  transform: translateY(20px);
  opacity: 0;
}
.animate-slide-up.show {
  transform: translateY(0);
  opacity: 1;
}

.animate-scale {
  transition: transform var(--transition-duration-300) var(--transition-timing-ease-in-out);
  transform: scale(0.95);
  opacity: 0;
}
.animate-scale.show {
  transform: scale(1);
  opacity: 1;
}

.animate-rotate {
  transition: transform var(--transition-duration-300) var(--transition-timing-ease-in-out);
  transform: rotate(-180deg);
}
.animate-rotate.show {
  transform: rotate(0);
}