/* ========================================
   ROOT.CSS - Design Tokens & CSS Variables
   Tema: Azul Royal (estilo TOTVS)
   ======================================== */

:root {
    /* 🎨 Cores Primárias */
    --clr-primary: #0f1c3d;
    --clr-primary-light: #3a5188;
    --clr-primary-dark: #274591;
    --clr-primary-gradient: linear-gradient(160deg, #0d2a7a 0%, #1439a3 100%);
    --clr-primary-rgb: 20, 57, 163;
    --clr-primary-text: #ffffff;
    --clr-primary-hover: var(--clr-primary-dark);

    /* 🟧 Cores de Destaque */
    --clr-accent: #f97316;
    --clr-accent-light: #fb923c;
    --clr-accent-dark: #c2410c;
    --clr-accent-text: #ffffff;
    --clr-accent-hover: var(--clr-accent-dark);

    /* ⬜ Botão secundário/outline — Voltar, Cancelar, Ver, Filtros */
    --clr-secondary-bg: var(--clr-bg-card);
    --clr-secondary-text: var(--clr-text);
    --clr-secondary-border: var(--clr-border);
    --clr-secondary-hover: var(--clr-bg-alt);

    /* 🧭 Menu superior — hoje herda de --clr-primary por padrão, mas é um token
       próprio pra poder ser customizado independente do botão/sidebar */
    --clr-navbar-bg: var(--clr-primary);
    --clr-navbar-text: #ffffff;

    /* ✅ Status */
    --clr-success: #16a34a;
    --clr-success-light: #4ade80;
    --clr-success-dark: #15803d;

    --clr-warning: #d97706;
    --clr-warning-light: #f59e0b;
    --clr-warning-dark: #b45309;

    --clr-danger: #dc2626;
    --clr-danger-light: #ef4444;
    --clr-danger-dark: #b91c1c;

    --clr-info: #1e4bc4;
    --clr-info-light: #eaeaeb;
    --clr-info-dark: #e4e5e7;

    /* 🌓 Cores de Fundo — neutras, quase brancas (o azul fica só nos
       destaques de hover/ativo e no menu superior, que usa --clr-primary*) */
    --clr-bg: #f1f3f6;
    --clr-bg-alt: #f7f8fa;
    --clr-bg-card: #ffffff;

    /* 📝 Cores de Texto */
    --clr-text: #1e293b;
    --clr-text-muted: #64748b;
    --clr-text-light: #94a3b8;

    /* 🔲 Bordas */
    --clr-border: #f0e8e2;
    --clr-border-light: #f1f5f9;

    /* 📦 Sidebar (clara) */
    --clr-sidebar-bg: #ffffff;
    --clr-sidebar-text: #1e293b;
    --clr-sidebar-text-muted: #64748b;
    --clr-sidebar-hover: #e6ebfa;
    --clr-sidebar-active: #1439a3;
    --clr-sidebar-active-bg: #e6ebfa;
    --clr-sidebar-border: #e2e8f0;

    /* 💡 Sombras */
    --clr-shadow: rgba(0, 0, 0, 0.04);
    --clr-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.04), 0 1px 2px -1px rgba(0, 0, 0, 0.03);
    --clr-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.06), 0 2px 6px -2px rgba(0, 0, 0, 0.04);
    --clr-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.08), 0 4px 12px -4px rgba(0, 0, 0, 0.04);

    /* 🔘 Bordas arredondadas */
    --clr-radius-sm: 8px;
    --clr-radius-md: 12px;
    --clr-radius-lg: 16px;

    /* ⏱️ Transições */
    --clr-transition: all 0.2s ease;

    /* 🧭 Dimensões do App Shell */
    --app-shell-height: calc(100vh - 124px);
    --navbar-height: 64px;
}

/* ========================================
   MODO ESCURO — cobre o "esqueleto" comum a todas as páginas (menu, sidebar,
   cards, textos, bordas). Cores de marca (primary/accent/status) permanecem
   as mesmas nos dois modos por padrão — só mudam se o usuário customizar via
   Perfil > Tema. Páginas específicas de módulo que ainda usam cor fixa (fora
   do sistema de tokens) não são afetadas por este bloco.
   ======================================== */
html[data-theme="dark"] {
    --clr-bg: #0d1220;
    --clr-bg-alt: #131a2c;
    --clr-bg-card: #182238;

    --clr-text: #e2e8f0;
    --clr-text-muted: #94a3b8;
    --clr-text-light: #64748b;

    --clr-border: #2a3349;
    --clr-border-light: #232b40;

    --clr-sidebar-bg: #101728;
    --clr-sidebar-text: #e2e8f0;
    --clr-sidebar-text-muted: #94a3b8;
    --clr-sidebar-hover: #1e2942;
    --clr-sidebar-active: #8fa8f7;
    --clr-sidebar-active-bg: #1e2a4a;
    --clr-sidebar-border: #2a3349;

    --clr-shadow: rgba(0, 0, 0, 0.3);
    --clr-shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.25);
    --clr-shadow-md: 0 6px 16px -4px rgba(0, 0, 0, 0.4), 0 2px 6px -2px rgba(0, 0, 0, 0.3);
    --clr-shadow-lg: 0 16px 32px -8px rgba(0, 0, 0, 0.5), 0 4px 12px -4px rgba(0, 0, 0, 0.35);
}

/* `.btn-close` (X de fechar modal/offcanvas/alert) do Bootstrap é um ícone SVG
   embutido via background-image em preto fixo — não existe variável CSS pra
   remapear a cor (diferente de --bs-primary etc.), então nunca acompanhou o
   tema. Em qualquer fundo escuro (offcanvas do menu mobile, modal, alert
   dispensável) ficava um X quase invisível. Truque padrão do próprio
   Bootstrap (usado no modo escuro nativo deles, "invert" do ícone). */
html[data-theme="dark"] .btn-close {
    filter: invert(1) grayscale(100%) brightness(200%);
}