/* ===================================================================
   M50 DESIGN SYSTEM - THEME TRANSITIONS
   Transições suaves para mudança de tema
   =================================================================== */

/* Transições específicas (melhor performance que *) */
html,
body,
#app,
.page,
.content,
.card,
.modal,
.sidebar,
.top-bar,
.actionbar,
.menu-iniciar {
    transition-property: background-color, color, border-color;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

/* Exceções: Elementos que não devem ter transição */
.loading,
.spinner,
.icon svg,
[class*="animate"],
[class*="animation"],
.chart,
.graph,
canvas,
video {
    transition: none !important;
}

/* Transições específicas para componentes interativos */
button,
a,
.menu-item,
.card,
.btn {
    transition-property: background-color, color, border-color, transform, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}

/* Inputs mantém transição suave */
input,
textarea,
select {
    transition-property: background-color, color, border-color, box-shadow;
    transition-duration: 200ms;
    transition-timing-function: ease-in-out;
}