/* Design System: Variáveis CSS Globais (Tema Claro/Escuro)
   Identidade Grupo Rocha Cavalcante: laranja (#ED4912) + grafite, neutros levemente quentes. */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=Outfit:wght@400;500;600;700;800&display=swap');

:root {
    /* Fontes */
    --fonte-principal: 'Inter', sans-serif;
    --fonte-titulo: 'Outfit', sans-serif;

    /* Tema Claro (Padrão) — neutros "stone" (quentes) */
    --cor-fundo: #f7f6f4;
    --cor-painel: #ffffff;
    --cor-painel-transparente: rgba(255, 255, 255, 0.85);
    --cor-borda: #e8e5e1;
    --cor-borda-foco: #d6d1cb;

    /* Texto */
    --cor-texto: #1c1917;
    --cor-texto-secundario: #57534e;
    --cor-texto-mutado: #a39e98;

    /* Cores da marca */
    /* Um tom abaixo do #ED4912 do logo: texto branco em cima fica com contraste 4.8:1 (AA) */
    --cor-primaria: #d03e0c;       /* Laranja Rocha Cavalcante */
    --cor-primaria-hover: #b3350a;
    --cor-primaria-rgb: 208, 62, 12;
    --cor-sobre-primaria: #ffffff; /* texto em cima de fundo laranja */
    --cor-marca: #ed4912;          /* laranja exato do logo (detalhes, não texto) */

    --cor-secundaria: #44403c;     /* Grafite (ícones e destaques neutros) */
    --cor-secundaria-hover: #292524;
    --cor-secundaria-rgb: 68, 64, 60;

    /* Estados de Feedback */
    --cor-sucesso: #059669;
    --cor-sucesso-fundo: #d1fae5;
    --cor-erro: #dc2626;
    --cor-erro-fundo: #fee2e2;
    --cor-alerta: #d97706;
    --cor-alerta-fundo: #fef3c7;
    --cor-info: #0891b2;

    /* Barra lateral (sempre escura, nos dois temas) */
    --sidebar-fundo: #1c1917;
    --sidebar-borda: #2c2825;
    --sidebar-texto: #a8a29e;
    --sidebar-texto-forte: #fafaf9;
    --sidebar-hover: rgba(255, 255, 255, 0.06);

    /* Sombras & Efeitos (leves; a separação vem das bordas finas) */
    --sombra-suave: 0 1px 2px rgba(28, 25, 23, 0.04);
    --sombra-media: 0 4px 12px -2px rgba(28, 25, 23, 0.08);
    --sombra-forte: 0 16px 32px -8px rgba(28, 25, 23, 0.18);
    --blur-glass: blur(10px);

    /* Dimensões */
    --sidebar-largura: 256px;
    --sidebar-largura-colapsada: 72px;
    --header-altura: 64px;
    --borda-raio-sm: 8px;
    --borda-raio-md: 10px;
    --borda-raio-lg: 14px;
    --borda-raio-xl: 20px;

    /* Transições */
    --transicao-rapida: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease, opacity 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
    --transicao-suave: background-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), color 0.25s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.25s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.25s cubic-bezier(0.4, 0, 0.2, 1), transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Modo Escuro */
[data-theme="dark"] {
    --cor-fundo: #0f0d0c;
    --cor-painel: #1a1715;
    --cor-painel-transparente: rgba(26, 23, 21, 0.85);
    --cor-borda: #2a2623;
    --cor-borda-foco: #3d3834;

    --cor-texto: #f5f5f4;
    --cor-texto-secundario: #a8a29e;
    --cor-texto-mutado: #78716c;

    --cor-primaria: #fb7a3c;
    --cor-primaria-hover: #fd9a66;
    --cor-primaria-rgb: 251, 122, 60;
    --cor-sobre-primaria: #1c1917; /* no escuro, texto escuro sobre o laranja claro */
    --cor-secundaria: #d6d3d1;
    --cor-secundaria-hover: #f5f5f4;
    --cor-secundaria-rgb: 214, 211, 209;

    --cor-sucesso: #34d399;
    --cor-sucesso-fundo: rgba(52, 211, 153, 0.12);
    --cor-erro: #f87171;
    --cor-erro-fundo: rgba(248, 113, 113, 0.12);
    --cor-alerta: #fbbf24;
    --cor-alerta-fundo: rgba(251, 191, 36, 0.12);

    --sidebar-fundo: #141210;
    --sidebar-borda: #262220;

    --sombra-suave: 0 1px 2px rgba(0, 0, 0, 0.3);
    --sombra-media: 0 4px 12px -2px rgba(0, 0, 0, 0.4);
    --sombra-forte: 0 16px 32px -8px rgba(0, 0, 0, 0.6);
}