/**
 * ============================================
 * VARIÁVEIS CSS - SISTEMA DE CORES PERSONALIZÁVEIS
 * Este arquivo define as cores do tema
 * ============================================
 */

:root {
    /* ========================================
       CORES PRINCIPAIS (Personalizáveis pelo admin)
       ======================================== */
    
    --cor-primaria: #667eea;
    --cor-primaria-hover: #5568d3;
    --cor-primaria-light: #8b9df2;
    --cor-primaria-dark: #4d5fb8;
    
    --cor-secundaria: #764ba2;
    --cor-secundaria-hover: #5f3c82;
    --cor-secundaria-light: #9066c4;
    --cor-secundaria-dark: #4a2f66;
    
    /* ========================================
       CORES DE FUNDO
       ======================================== */
    
    --cor-fundo: #f5f5f5;
    --cor-fundo-escuro: #e8e8e8;
    --cor-branco: #ffffff;
    --cor-branco-sujo: #fafafa;
    
    /* ========================================
       CORES DE TEXTO
       ======================================== */
    
    --cor-texto: #333333;
    --cor-texto-secundario: #666666;
    --cor-texto-claro: #999999;
    --cor-texto-muito-claro: #cccccc;
    
    /* ========================================
       CORES DE STATUS
       ======================================== */
    
    --cor-sucesso: #2ecc71;
    --cor-sucesso-light: #d4edda;
    --cor-sucesso-dark: #155724;
    
    --cor-aviso: #f39c12;
    --cor-aviso-light: #fff3cd;
    --cor-aviso-dark: #856404;
    
    --cor-erro: #e74c3c;
    --cor-erro-light: #f8d7da;
    --cor-erro-dark: #721c24;
    
    --cor-info: #3498db;
    --cor-info-light: #d1ecf1;
    --cor-info-dark: #0c5460;
    
    --cor-neutro: #95a5a6;
    --cor-neutro-light: #ecf0f1;
    --cor-neutro-dark: #7f8c8d;
    
    /* ========================================
       BORDAS E SOMBRAS
       ======================================== */
    
    --cor-borda: #e0e0e0;
    --cor-borda-escura: #cccccc;
    --cor-borda-clara: #f0f0f0;
    
    --sombra-leve: 0 2px 5px rgba(0, 0, 0, 0.05);
    --sombra-media: 0 2px 10px rgba(0, 0, 0, 0.1);
    --sombra-forte: 0 10px 40px rgba(0, 0, 0, 0.2);
    --sombra-hover: 0 4px 15px rgba(0, 0, 0, 0.15);
    
    /* ========================================
       GRADIENTES
       ======================================== */
    
    --gradiente-primario: linear-gradient(135deg, var(--cor-primaria) 0%, var(--cor-secundaria) 100%);
    --gradiente-primario-inverso: linear-gradient(135deg, var(--cor-secundaria) 0%, var(--cor-primaria) 100%);
    --gradiente-sucesso: linear-gradient(135deg, #2ecc71 0%, #27ae60 100%);
    --gradiente-aviso: linear-gradient(135deg, #f39c12 0%, #e67e22 100%);
    
    /* ========================================
       ESPAÇAMENTOS
       ======================================== */
    
    --espaco-mini: 4px;
    --espaco-pequeno: 8px;
    --espaco-medio: 16px;
    --espaco-grande: 24px;
    --espaco-extra: 32px;
    --espaco-jumbo: 48px;
    
    /* ========================================
       RAIOS DE BORDA (Border Radius)
       ======================================== */
    
    --radius-pequeno: 4px;
    --radius-medio: 8px;
    --radius-grande: 12px;
    --radius-extra: 16px;
    --radius-redondo: 50%;
    --radius-pill: 9999px;
    
    /* ========================================
       TIPOGRAFIA
       ======================================== */
    @import url('https://fonts.googleapis.com/css2?family=Michroma&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');

    --fonte-principal: "Poppins", sans-serif;
    --fonte-titulo: "Poppins", sans-serif;
    --fonte-mono: 'Courier New', Courier, monospace;
    
    --tamanho-mini: 11px;
    --tamanho-pequeno: 12px;
    --tamanho-normal: 14px;
    --tamanho-medio: 16px;
    --tamanho-grande: 18px;
    --tamanho-titulo: 24px;
    --tamanho-titulo-grande: 32px;
    --tamanho-hero: 48px;
    
    --peso-leve: 300;
    --peso-normal: 400;
    --peso-medio: 500;
    --peso-negrito: 600;
    --peso-extra-negrito: 700;
    
    /* ========================================
       TRANSIÇÕES E ANIMAÇÕES
       ======================================== */
    
    --transicao-rapida: 0.15s ease;
    --transicao-normal: 0.3s ease;
    --transicao-lenta: 0.5s ease;
    
    --animacao-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
    --animacao-suave: cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ========================================
       LARGURAS E ALTURAS
       ======================================== */
    
    --largura-maxima: 1200px;
    --largura-conteudo: 900px;
    --largura-sidebar: 250px;
    --largura-card: 600px;
    --largura-modal: 500px;
    
    --altura-header: 60px;
    --altura-input: 44px;
    --altura-botao: 44px;
    
    /* ========================================
       Z-INDEX (Camadas)
       ======================================== */
    
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-fixed: 300;
    --z-modal-backdrop: 400;
    --z-modal: 500;
    --z-popover: 600;
    --z-tooltip: 700;
    --z-notification: 800;
}

/* ============================================
   TEMA ESCURO
   ============================================ */

[data-theme="escuro"],
.tema-escuro {
    --cor-fundo: #1a1a1a;
    --cor-fundo-escuro: #0f0f0f;
    --cor-branco: #2d2d2d;
    --cor-branco-sujo: #242424;
    
    --cor-texto: #e0e0e0;
    --cor-texto-secundario: #b0b0b0;
    --cor-texto-claro: #808080;
    --cor-texto-muito-claro: #505050;
    
    --cor-borda: #404040;
    --cor-borda-escura: #2a2a2a;
    --cor-borda-clara: #4a4a4a;
    
    --sombra-leve: 0 2px 5px rgba(0, 0, 0, 0.3);
    --sombra-media: 0 2px 10px rgba(0, 0, 0, 0.4);
    --sombra-forte: 0 10px 40px rgba(0, 0, 0, 0.6);
}

/* ============================================
   CLASSES UTILITÁRIAS DE CORES
   ============================================ */

/* Backgrounds */
.bg-primario { background: var(--cor-primaria) !important; }
.bg-secundario { background: var(--cor-secundaria) !important; }
.bg-sucesso { background: var(--cor-sucesso) !important; }
.bg-aviso { background: var(--cor-aviso) !important; }
.bg-erro { background: var(--cor-erro) !important; }
.bg-info { background: var(--cor-info) !important; }
.bg-branco { background: var(--cor-branco) !important; }
.bg-fundo { background: var(--cor-fundo) !important; }

/* Backgrounds com gradiente */
.bg-gradiente { background: var(--gradiente-primario) !important; }
.bg-gradiente-inverso { background: var(--gradiente-primario-inverso) !important; }

/* Textos */
.texto-primario { color: var(--cor-primaria) !important; }
.texto-secundario { color: var(--cor-secundaria) !important; }
.texto-sucesso { color: var(--cor-sucesso) !important; }
.texto-aviso { color: var(--cor-aviso) !important; }
.texto-erro { color: var(--cor-erro) !important; }
.texto-info { color: var(--cor-info) !important; }
.texto-claro { color: var(--cor-texto-claro) !important; }
.texto-escuro { color: var(--cor-texto) !important; }
.texto-branco { color: #ffffff !important; }

/* Bordas */
.borda-primario { border-color: var(--cor-primaria) !important; }
.borda-secundario { border-color: var(--cor-secundaria) !important; }
.borda-sucesso { border-color: var(--cor-sucesso) !important; }
.borda-aviso { border-color: var(--cor-aviso) !important; }
.borda-erro { border-color: var(--cor-erro) !important; }
.borda-padrao { border-color: var(--cor-borda) !important; }

/* ============================================
   CLASSES UTILITÁRIAS DE ESPAÇAMENTO
   ============================================ */

/* Margens */
.m-0 { margin: 0 !important; }
.m-1 { margin: var(--espaco-pequeno) !important; }
.m-2 { margin: var(--espaco-medio) !important; }
.m-3 { margin: var(--espaco-grande) !important; }
.m-4 { margin: var(--espaco-extra) !important; }

.mt-0 { margin-top: 0 !important; }
.mt-1 { margin-top: var(--espaco-pequeno) !important; }
.mt-2 { margin-top: var(--espaco-medio) !important; }
.mt-3 { margin-top: var(--espaco-grande) !important; }
.mt-4 { margin-top: var(--espaco-extra) !important; }

.mb-0 { margin-bottom: 0 !important; }
.mb-1 { margin-bottom: var(--espaco-pequeno) !important; }
.mb-2 { margin-bottom: var(--espaco-medio) !important; }
.mb-3 { margin-bottom: var(--espaco-grande) !important; }
.mb-4 { margin-bottom: var(--espaco-extra) !important; }

/* Paddings */
.p-0 { padding: 0 !important; }
.p-1 { padding: var(--espaco-pequeno) !important; }
.p-2 { padding: var(--espaco-medio) !important; }
.p-3 { padding: var(--espaco-grande) !important; }
.p-4 { padding: var(--espaco-extra) !important; }

/* ============================================
   CLASSES UTILITÁRIAS DE TIPOGRAFIA
   ============================================ */

.texto-mini { font-size: var(--tamanho-mini) !important; }
.texto-pequeno { font-size: var(--tamanho-pequeno) !important; }
.texto-normal { font-size: var(--tamanho-normal) !important; }
.texto-medio { font-size: var(--tamanho-medio) !important; }
.texto-grande { font-size: var(--tamanho-grande) !important; }
.texto-titulo { font-size: var(--tamanho-titulo) !important; }

.peso-leve { font-weight: var(--peso-leve) !important; }
.peso-normal { font-weight: var(--peso-normal) !important; }
.peso-medio { font-weight: var(--peso-medio) !important; }
.peso-negrito { font-weight: var(--peso-negrito) !important; }
.peso-extra { font-weight: var(--peso-extra-negrito) !important; }

.texto-centro { text-align: center !important; }
.texto-esquerda { text-align: left !important; }
.texto-direita { text-align: right !important; }

/* ============================================
   CLASSES UTILITÁRIAS DE DISPLAY
   ============================================ */

.oculto { display: none !important; }
.visivel { display: block !important; }
.flex { display: flex !important; }
.flex-coluna { flex-direction: column !important; }
.flex-centro { 
    display: flex !important; 
    justify-content: center !important; 
    align-items: center !important; 
}
.flex-entre { 
    display: flex !important; 
    justify-content: space-between !important; 
    align-items: center !important; 
}

/* ============================================
   CLASSES UTILITÁRIAS DE SOMBRA
   ============================================ */

.sombra-leve { box-shadow: var(--sombra-leve) !important; }
.sombra-media { box-shadow: var(--sombra-media) !important; }
.sombra-forte { box-shadow: var(--sombra-forte) !important; }
.sem-sombra { box-shadow: none !important; }

/* ============================================
   CLASSES UTILITÁRIAS DE BORDER RADIUS
   ============================================ */

.radius-pequeno { border-radius: var(--radius-pequeno) !important; }
.radius-medio { border-radius: var(--radius-medio) !important; }
.radius-grande { border-radius: var(--radius-grande) !important; }
.radius-redondo { border-radius: var(--radius-redondo) !important; }
.radius-pill { border-radius: var(--radius-pill) !important; }
.sem-radius { border-radius: 0 !important; }

/* ============================================
   ANIMAÇÕES GLOBAIS
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes slideIn {
    from {
        transform: translateX(-100%);
    }
    to {
        transform: translateX(0);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

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

.animacao-fade { animation: fadeIn var(--transicao-normal); }
.animacao-slide { animation: slideIn var(--transicao-normal); }
.animacao-pulse { animation: pulse 2s infinite; }
.animacao-spin { animation: spin 1s linear infinite; }

/* ============================================
   RESPONSIVIDADE
   ============================================ */

@media (max-width: 768px) {
    :root {
        --tamanho-normal: 13px;
        --tamanho-medio: 15px;
        --tamanho-grande: 17px;
        --tamanho-titulo: 20px;
        --tamanho-titulo-grande: 26px;
        
        --espaco-medio: 12px;
        --espaco-grande: 20px;
        --espaco-extra: 28px;
    }
}

@media (max-width: 480px) {
    :root {
        --tamanho-normal: 12px;
        --tamanho-medio: 14px;
        --tamanho-titulo: 18px;
        --tamanho-titulo-grande: 22px;
    }
}