/*
=========================================
root.css
Central de Variáveis de Design do Tema Expandir
Versão 3.0 - Robusta e Completa
=========================================
*/

:root, [data-theme="light"] {
    /* 🎨 Paleta de Cores Principal */
    --cor-primaria: #0D9488; /* Verde Sóbrio */
    --cor-primaria-escura: #047857;
    --cor-primaria-clara: #CCFBF1;
    --cor-primaria-transparente: rgba(13, 148, 136, 0.1);

    /* 🌈 Cores de Feedback e Status */
    --cor-sucesso: #22C55E;
    --cor-erro: #F43F5E;
    --cor-aviso: #F97316;
    --cor-info: #3B82F6;
    --cor-info-fundo: #EFF6FF;

    /* ✒️ Cores de Texto */
    --cor-texto-principal: #1F2937;
    --cor-texto-secundario: #4B5563;
    --cor-texto-suave: #6B7280;
    --cor-texto-desativado: #9CA3AF;
    --cor-texto-invertido: #FFFFFF;

    /* 🏠 Cores de Fundo */
    --cor-fundo-principal: #FFFFFF;
    --cor-fundo-secundario: #F9FAFB;
    --cor-fundo-terciario: #F3F4F6;
    --cor-borda: #E5E7EB;

    /* 📦 Sombras (Material Design) */
    --sombra-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --sombra-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    --sombra-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

    /* 📏 Espaçamento e Medidas */
    --espacamento-xs: 0.25rem;  /* 4px */
    --espacamento-sm: 0.5rem;   /* 8px */
    --espacamento-md: 1rem;     /* 16px */
    --espacamento-lg: 1.5rem;   /* 24px */
    --espacamento-xl: 2rem;     /* 32px */

    /* 📐 Raios de Borda */
    --raio-borda-sm: 0.375rem; /* 6px */
    --raio-borda-md: 0.75rem;  /* 12px */
    --raio-borda-lg: 1rem;     /* 16px */
    --raio-borda-full: 9999px;

    /* 🔤 Tipografia */
    --fonte-familia: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --tamanho-fonte-sm: 0.875rem;
    --tamanho-fonte-base: 1rem;
    --tamanho-fonte-lg: 1.125rem;
    --tamanho-fonte-xl: 1.25rem;
    --tamanho-fonte-2xl: 1.5rem;
    --tamanho-fonte-3xl: 1.875rem;

    /* ⚡ Transições */
    --transicao-rapida: 150ms cubic-bezier(0.4, 0, 0.2, 1);
    --transicao-normal: 300ms cubic-bezier(0.4, 0, 0.2, 1);

    /* 🎯 Z-index */
    --z-modal: 1050;
    --z-modal-backdrop: 1040;
    --z-combobox: 1000;
    --z-dropdown: 1000;
}

/* =========================================
   TEMA ESCURO (DARK MODE)
   ========================================= */
[data-theme="dark"] {
    /* 🎨 Paleta de Cores Principal */
    --cor-primaria: #5EEAD4;
    --cor-primaria-escura: #0D9488;
    --cor-primaria-clara: #115E59;
    --cor-primaria-transparente: rgba(94, 234, 212, 0.1);

    /* ✒️ Cores de Texto */
    --cor-texto-principal: #F9FAFB;
    --cor-texto-secundario: #D1D5DB;
    --cor-texto-suave: #9CA3AF;
    --cor-texto-desativado: #6B7280;
    --cor-texto-invertido: #111827;

    /* 🏠 Cores de Fundo */
    --cor-fundo-principal: #1F2937;
    --cor-fundo-secundario: #111827;
    --cor-fundo-terciario: #374151;
    --cor-borda: #4B5563;

    /* 📦 Sombras (Adaptadas para fundos escuros) */
    --sombra-md: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -2px rgba(0, 0, 0, 0.2);
    --sombra-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --sombra-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.4), 0 8px 10px -6px rgba(0, 0, 0, 0.3);
}