/*
 * Tokens visuais globais do Painel.
 * Use em CSS: color: var(--exp-color-text-primary);
 * Use com Tailwind: bg-[var(--exp-color-primary-500)].
 */
:root {
    /* Recuo lateral compartilhado pelas paginas que adotam o design system. */
    --exp-page-gutter: clamp(24px, 5%, 80px);

    /* Campos de filtro: uso opt-in, sem alterar a densidade do legado. */
    --exp-filter-control-height: 40px;
    --exp-filter-font-size: 12px;
    --exp-filter-label-gap: 6px;

    /* Graficos opt-in: medidas compartilhadas por Gestao e BI Juridico. */
    --exp-chart-font-size: 12px;
    --exp-chart-track-height: 12px;
    --exp-chart-track-thin-height: 8px;
    --exp-chart-dot-size: 8px;

    /* Cores da marca aprovadas; adocao gradual, sem alterar o legado. */
    --exp-color-brand-blue: #1EA0F2;
    --exp-color-brand-navy: #11114B;

    /* Marca e acoes */
    --exp-color-primary-50: #f0f9ff;
    --exp-color-primary-100: #e0f2fe;
    --exp-color-primary-200: #bae6fd;
    --exp-color-primary-300: #7dd3fc;
    --exp-color-primary-400: #38bdf8;
    --exp-color-primary-500: #0ea5e9;
    --exp-color-primary-600: #0284c7;
    --exp-color-primary-700: #0369a1;
    --exp-color-primary-800: #075985;
    --exp-color-primary-900: #0c4a6e;

    /* Superficies, texto e bordas */
    --exp-color-surface: #ffffff;
    --exp-color-surface-subtle: #f8fafc;
    --exp-color-surface-muted: #f1f5f9;
    --exp-color-border: #e2e8f0;
    --exp-color-border-strong: #cbd5e1;
    --exp-color-text-primary: #0f172a;
    --exp-color-text-secondary: #475569;
    --exp-color-text-muted: #64748b;
    --exp-color-text-disabled: #94a3b8;

    /* Skeleton opt-in: preenchimento neutro e brilho compartilhados. */
    --exp-skeleton-bg: var(--exp-color-border);
    --exp-skeleton-highlight: var(--exp-color-surface-muted);
    --exp-skeleton-duration: 1.2s;

    /* Tinta principal (texto). No claro e o navy da marca; no escuro vira tinta clara.
       Separa o papel de TEXTO do papel de FUNDO de --exp-color-brand-navy, que deve
       permanecer escuro nos dois temas (botoes, tabs ativas, KPIs, cards de marca). */
    --exp-color-ink: var(--exp-color-brand-navy);

    /* Estados semanticos */
    --exp-color-success: #22c55e;
    --exp-color-success-subtle: #dcfce7;
    --exp-color-warning: #f59e0b;
    --exp-color-warning-subtle: #fef3c7;
    --exp-color-danger: #ef4444;
    --exp-color-danger-subtle: #fee2e2;
    /* Texto legivel sobre superficies claras e fundos semanticos suaves. */
    --exp-color-success-text: #166534;
    --exp-color-warning-text: #92400e;
    --exp-color-danger-text: #b42318;
    --exp-color-info: var(--exp-color-primary-500);
    --exp-color-info-subtle: var(--exp-color-primary-50);
    /* Texto informativo sobre superficie clara/info-subtle: primary-800 (#075985).
       No dark usa #7DD3FC sobre info-subtle #0B2942; nao e tinta navy fixa. */
    --exp-color-info-text: var(--exp-color-primary-800);

    /* Selecao persistente: filtros, abas e linhas selecionadas. */
    --exp-color-selected-bg: var(--exp-color-primary-50);
    --exp-color-selected-bg-hover: var(--exp-color-primary-100);
    --exp-color-selected-border: var(--exp-color-primary-200);
    --exp-color-selected-text: var(--exp-color-primary-700);

    /* Shell: header (aliases para permitir personalizacao independente). */
    --exp-shell-header-bg: var(--exp-color-surface);
    --exp-shell-header-border: var(--exp-color-border);
    --exp-shell-header-shadow: var(--exp-shadow-soft);
    --exp-shell-header-action-font-size: 0.875rem;
    --exp-shell-header-action-font-weight: 500;
    --exp-shell-header-action-padding-x: 0.75rem;
    --exp-shell-profile-text: var(--exp-color-brand-navy);
    --exp-shell-profile-hover-bg: var(--exp-color-surface-muted);
    --exp-shell-profile-name-max-width: 12rem;
    --exp-shell-profile-padding-x: 0.375rem;
    --exp-shell-profile-padding-y: 0.125rem;

    /* Checkbox nativo opt-in; acompanha as superficies de cada tema. */
    --exp-checkbox-size: 18px;
    --exp-checkbox-radius: var(--exp-radius-sm);
    --exp-checkbox-bg: var(--exp-color-surface);
    --exp-checkbox-border: var(--exp-color-text-muted);
    --exp-checkbox-selected-bg: var(--exp-color-brand-blue);
    --exp-checkbox-mark: var(--exp-color-brand-navy);

    /* Botoes */
    --exp-button-bg-primary: #2563eb;
    --exp-button-text-primary: #ffffff;
    --exp-button-bg-secondary: #ffffff;
    --exp-button-bg-secondary-hover: #f9fafb;
    --exp-button-border-secondary: #d1d5db;
    --exp-button-text-secondary: #1e293b;
    --exp-button-gap: 0.5rem;
    --exp-button-padding-x: 1rem;
    --exp-button-padding-y: 0.5rem;
    --exp-button-radius: var(--exp-radius-sm);
    --exp-button-hover-opacity: 0.9;

    /* Variante verde de acao; nao representa status de sucesso. */
    --exp-button-bg-green: #16a34a;
    --exp-button-bg-green-hover: #15803d;
    --exp-button-text-green: var(--exp-button-text-primary);

    /* Botao destrutivo: texto branco legivel sem alterar a cor geral de erro. */
    --exp-button-bg-danger: #dc2626;
    --exp-button-bg-danger-hover: #b91c1c;
    --exp-button-text-danger: #ffffff;
    --exp-button-ghost-danger-text: #b42318;
    --exp-button-ghost-danger-bg-hover: var(--exp-color-danger-subtle);

    /* Botao somente com icone */
    --exp-icon-button-size: 36px;
    --exp-icon-button-icon-size: 20px;
    --exp-icon-button-color: var(--exp-color-text-secondary);
    --exp-icon-button-hover-color: var(--exp-color-text-primary);
    --exp-icon-button-hover-bg: var(--exp-color-surface-muted);

    /* Contador de notificacoes */
    --exp-notification-badge-bg: #dc2626;
    --exp-notification-badge-text: var(--exp-color-surface);
    --exp-notification-badge-ring: var(--exp-shell-header-bg);
    --exp-notification-badge-size: 16px;
    --exp-notification-badge-font-size: 10px;

    /* Dropdown de acoes */
    --exp-dropdown-bg: var(--exp-color-surface);
    --exp-dropdown-border: var(--exp-color-border);
    --exp-dropdown-text: var(--exp-color-brand-navy);
    --exp-dropdown-icon: var(--exp-color-text-secondary);
    --exp-dropdown-hover-bg: var(--exp-color-surface-subtle);
    --exp-dropdown-danger-text: var(--exp-button-ghost-danger-text);
    --exp-dropdown-danger-hover-bg: var(--exp-button-ghost-danger-bg-hover);
    --exp-dropdown-radius: var(--exp-radius-md);
    --exp-dropdown-shadow: var(--exp-shadow-soft);
    --exp-dropdown-width: 16rem;
    --exp-dropdown-z-index: 120;
    --exp-dropdown-font-size: 0.875rem;
    --exp-dropdown-item-padding-x: 0.875rem;
    --exp-dropdown-item-padding-y: 0.625rem;

    /* Avatar */
    --exp-avatar-size-xs: 1.5rem;
    --exp-avatar-size-sm: 2rem;
    --exp-avatar-size-md: 2.5rem;
    --exp-avatar-size-lg: 3.5rem;
    --exp-avatar-size-xl: 5rem;
    --exp-avatar-bg-unassigned: #f8fafc;
    --exp-avatar-text: #ffffff;
    --exp-avatar-border: #ffffff;
    --exp-avatar-group-gap: -0.5rem;

    /* Modal de filtros */
    --exp-filtros-overlay: rgba(0, 0, 0, 0.4);
    --exp-filtros-largura: 48rem;
    --exp-filtros-raio: 0.75rem;
    --exp-filtros-padding-x: 1.5rem;
    --exp-filtros-padding-y: 1rem;
    --exp-filtros-gap: 1rem;
    --exp-filtros-z-index: 50;
    --exp-filtros-sombra: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                           0 8px 10px -6px rgba(0, 0, 0, 0.1);

    /* Fundacoes reutilizaveis */
    --exp-radius-sm: 0.375rem;
    --exp-radius-md: 0.5rem;
    --exp-radius-lg: 0.75rem;
    --exp-radius-xl: 1rem;
    /* Capsula compartilhada por progresso de importacao e thumb de Processos. */
    --exp-radius-pill: 9999px;
    --exp-shadow-soft: 0 4px 14px rgba(15, 23, 42, 0.08);
    --exp-transition-base: 150ms ease;
}

@media (max-width: 600px) {
    :root { --exp-page-gutter: 12px; }
}

html.dark {
    color-scheme: dark;

    /* =========================================================================
       EXPEDIT DARK — MIDNIGHT SLATE

       Regra:
       - neutros/slate constroem a interface;
       - azul Expedit fica reservado para marca e interação;
       - elevação acontece principalmente por luminosidade;
       - cores semânticas comunicam significado, não decoração.
       ========================================================================= */

    /* -------------------------------------------------------------------------
       Primitivos exclusivos do tema escuro
       ------------------------------------------------------------------------- */

    --exp-dark-canvas: #0B1220;
    --exp-dark-surface: #111827;
    --exp-dark-surface-raised: #172033;
    --exp-dark-surface-hover: #1E293B;

    --exp-dark-border: #263449;
    --exp-dark-border-strong: #56667C;


    /* -------------------------------------------------------------------------
       Superfícies
       ------------------------------------------------------------------------- */

    /* Fundo geral da aplicação */
    --exp-color-surface-subtle: var(--exp-dark-canvas);

    /* Cards, sidebar, header e componentes */
    --exp-color-surface: var(--exp-dark-surface);

    /* Hover, selected neutro e preenchimentos secundários */
    --exp-color-surface-muted: var(--exp-dark-surface-hover);

    /* Menus, popovers, dropdowns e elementos elevados */
    --exp-color-surface-raised: var(--exp-dark-surface-raised);

    /* Bordas */
    --exp-color-border: var(--exp-dark-border);
    --exp-color-border-strong: var(--exp-dark-border-strong);

    --exp-skeleton-bg: var(--exp-color-surface-muted);
    --exp-skeleton-highlight: var(--exp-color-border);


    /* -------------------------------------------------------------------------
       Texto
       ------------------------------------------------------------------------- */

    /*
     * Evita branco puro em todo o conteúdo.
     * Mantém contraste alto sem criar efeito "brilhando" no fundo escuro.
     */
    --exp-color-text-primary: #F1F5F9;
    --exp-color-text-secondary: #CBD5E1;
    --exp-color-text-muted: #94A3B8;
    --exp-color-text-disabled: #64748B;

    --exp-color-ink: var(--exp-color-text-primary);


    /* -------------------------------------------------------------------------
       Interação / Accent
       ------------------------------------------------------------------------- */

    /*
     * Brand blue continua sendo identidade.
     * Não deve virar a cor de todas as superfícies.
     */
    --exp-color-link: #38BDF8;
    --exp-color-link-hover: #7DD3FC;

    --exp-color-focus-ring: #38BDF8;
    --exp-color-focus-ring-offset: var(--exp-dark-canvas);


    /* -------------------------------------------------------------------------
       Seleção
       Ex.: item ativo da sidebar, filtros selecionados, linhas selecionadas.
       ------------------------------------------------------------------------- */

    --exp-color-selected-bg: rgba(30, 160, 242, 0.14);
    --exp-color-selected-bg-hover: rgba(30, 160, 242, 0.20);
    --exp-color-selected-border: rgba(56, 189, 248, 0.38);
    --exp-color-selected-text: #BAE6FD;


    /* -------------------------------------------------------------------------
       Estados semânticos
       ------------------------------------------------------------------------- */

    --exp-color-success: #4ADE80;
    --exp-color-success-subtle: #0F2A1D;
    --exp-color-success-text: #86EFAC;

    --exp-color-warning: #FBBF24;
    --exp-color-warning-subtle: #33250B;
    --exp-color-warning-text: #FCD34D;

    --exp-color-danger: #F87171;
    --exp-color-danger-subtle: #351418;
    --exp-color-danger-text: #FDA4AF;

    --exp-color-info: #38BDF8;
    --exp-color-info-subtle: #0B2942;
    /* Tinta informativa clara do tema escuro, distinta da cor de marca. */
    --exp-color-info-text: #7DD3FC;


    /* -------------------------------------------------------------------------
       Botão primário
       ------------------------------------------------------------------------- */

    /*
     * Mantém azul mais profundo para permitir texto branco acessível.
     */
    --exp-button-bg-primary: #2563EB;
    --exp-button-bg-primary-hover: #1D4ED8;
    --exp-button-bg-primary-active: #1E40AF;
    --exp-button-text-primary: #FFFFFF;

    /* Melhor usar estados de cor explícitos em vez de opacity */
    --exp-button-hover-opacity: 1;


    /* -------------------------------------------------------------------------
       Botão secundário / outlined
       ------------------------------------------------------------------------- */

    --exp-button-bg-secondary: var(--exp-dark-surface);
    --exp-button-bg-secondary-hover: var(--exp-dark-surface-hover);
    --exp-button-border-secondary: var(--exp-dark-border-strong);
    --exp-button-text-secondary: var(--exp-color-text-primary);


    /* -------------------------------------------------------------------------
       Variante verde LEGADA

       Sugestão: remover do Design System.
       Verde deveria significar success/positivo, não uma ação arbitrária.
       Mantido aqui apenas por compatibilidade.
       ------------------------------------------------------------------------- */

    --exp-button-bg-green: #15803D;
    --exp-button-bg-green-hover: #166534;
    --exp-button-text-green: #FFFFFF;


    /* -------------------------------------------------------------------------
       Destrutivo
       ------------------------------------------------------------------------- */

    /*
     * Não usar --exp-color-danger diretamente como fundo.
     * O danger de foreground é propositalmente mais claro no dark,
     * enquanto botão preenchido precisa ser mais escuro para texto branco.
     */
    --exp-button-bg-danger: #DC2626;
    --exp-button-bg-danger-hover: #B91C1C;
    --exp-button-text-danger: #FFFFFF;

    --exp-button-ghost-danger-text: #FDA4AF;
    --exp-button-ghost-danger-bg-hover: #351418;


    /* -------------------------------------------------------------------------
       Icon buttons
       ------------------------------------------------------------------------- */

    --exp-icon-button-color: #94A3B8;
    --exp-icon-button-hover-color: #F1F5F9;
    --exp-icon-button-hover-bg: var(--exp-dark-surface-hover);


    /* -------------------------------------------------------------------------
       Header / shell
       ------------------------------------------------------------------------- */

    --exp-shell-header-bg: var(--exp-dark-surface);
    --exp-shell-header-border: var(--exp-dark-border);

    /*
     * Shadow propositalmente discreta.
     * A diferença de superfície faz a maior parte do trabalho de elevação.
     */
    --exp-shell-header-shadow:
        0 1px 0 rgba(255, 255, 255, 0.02),
        0 8px 24px rgba(0, 0, 0, 0.16);

    --exp-shell-profile-text: var(--exp-color-text-secondary);
    --exp-shell-profile-hover-bg: var(--exp-dark-surface-hover);


    /* -------------------------------------------------------------------------
       Dropdowns / popovers
       ------------------------------------------------------------------------- */

    --exp-dropdown-bg: var(--exp-dark-surface-raised);
    --exp-dropdown-border: var(--exp-dark-border);

    --exp-dropdown-text: var(--exp-color-text-primary);
    --exp-dropdown-icon: var(--exp-color-text-muted);

    --exp-dropdown-hover-bg: var(--exp-dark-surface-hover);

    --exp-dropdown-danger-text: #FDA4AF;
    --exp-dropdown-danger-hover-bg: #351418;

    --exp-dropdown-shadow:
        0 16px 40px rgba(0, 0, 0, 0.38),
        0 0 0 1px rgba(148, 163, 184, 0.05);


    /* -------------------------------------------------------------------------
       Notificações
       ------------------------------------------------------------------------- */

    --exp-notification-badge-bg: #DC2626;
    --exp-notification-badge-text: #FFFFFF;
    --exp-notification-badge-ring: var(--exp-shell-header-bg);


    /* -------------------------------------------------------------------------
       Avatar
       ------------------------------------------------------------------------- */

    --exp-avatar-bg-unassigned: var(--exp-dark-surface-hover);
    --exp-avatar-text: var(--exp-color-text-primary);
    --exp-avatar-border: var(--exp-dark-surface);


    /* -------------------------------------------------------------------------
       Modal / overlay
       ------------------------------------------------------------------------- */

    --exp-filtros-overlay: rgba(2, 6, 23, 0.68);

    --exp-filtros-sombra:
        0 24px 64px rgba(0, 0, 0, 0.48),
        0 0 0 1px rgba(148, 163, 184, 0.06);


    /* -------------------------------------------------------------------------
       Elevation genérica
       ------------------------------------------------------------------------- */

    --exp-shadow-soft:
        0 12px 32px rgba(0, 0, 0, 0.28);
}