/**
 * AgendaPet - Design System Styles
 * Utiliza tokens de design para consistência visual
 */

/* Importar tokens de design */
@import url('./tokens.css');

/* ========== CLASSES DE CORES BOOTSTRAP (usando tokens) ========== */
.bg-primary {
    background-color: var(--color-primary) !important;
}

.bg-success {
    background-color: var(--color-success) !important;
}

.bg-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-gray-900) !important;
}

.bg-info {
    background-color: var(--color-info) !important;
}

.bg-danger {
    background-color: var(--color-danger) !important;
}

.bg-secondary {
    background-color: var(--color-secondary) !important;
}

/* ========== CLASSES CUSTOMIZADAS ========== */
.bg-custom-available {
    background-color: #f8fff8 !important;
    border: solid var(--border-width-thin) var(--color-gray-200) !important;
    font-weight: var(--font-weight-normal) !important;
}

/* ========== UTILITÁRIOS DE ESPAÇAMENTO ========== */
.gap-xs { gap: var(--spacing-xs); }
.gap-sm { gap: var(--spacing-sm); }
.gap-md { gap: var(--spacing-md); }
.gap-lg { gap: var(--spacing-lg); }
.gap-xl { gap: var(--spacing-xl); }

/* ========== UTILITÁRIOS DE SOMBRA ========== */
.shadow-xs { box-shadow: var(--shadow-xs); }
.shadow-sm { box-shadow: var(--shadow-sm); }
.shadow-md { box-shadow: var(--shadow-md); }
.shadow-lg { box-shadow: var(--shadow-lg); }
.shadow-xl { box-shadow: var(--shadow-xl); }

/* ========== UTILITÁRIOS DE TRANSIÇÃO ========== */
.transition-fast { transition: all var(--transition-fast); }
.transition-base { transition: all var(--transition-base); }
.transition-slow { transition: all var(--transition-slow); }

/* ========== MELHORIAS GLOBAIS ========== */
* {
    font-family: var(--font-family-base);
}

body {
    color: var(--color-gray-900);
    background-color: var(--color-gray-50);
}