/* ==========================================================================
   temas.css — FONTE UNICA DE COR do OuTicket (ver DESIGN_SYSTEM.md).

   Tres camadas:
   1. Primitivos (--goat-*): a paleta. Trocar uma cor = editar UMA linha.
      Declarados uma vez, fora dos blocos de tema. So este arquivo os usa.
   2. Semanticos por tema (--fundo, --primaria, --texto...): o PAPEL.
      Criar um tema = um bloco novo mapeando os papeis.
   3. Componente (--selo-*, --grafico-*, --roi-*, --nav-*, --outie-palco):
      ajuste fino de um componente; aponta para semanticos (excecao nomeada:
      identidade fixa em petroleo aponta direto para o primitivo).

   Bloco Classico: valores LITERAIS de antes dos temas (nada muda para quem
   esta nele). Os tokens --c-<hex> registram cada cor que estava escrita
   direto no CSS/templates; no Classico valem o proprio literal e nos blocos
   GOAT apontam para o papel certo. Camada de migracao: codigo novo usa
   semanticos, nunca --c-*.
   ========================================================================== */

/* 1. Primitivos GOAT (mesmos valores do ZipERP, frontend/src/index.css) */
:root {
    --goat-petroleo: #193235;
    --goat-petroleo-escuro: #0E2022;
    --goat-petroleo-2: #224043;
    --goat-petroleo-3: #2A4B4E;
    --goat-ardosia: #405B5C;
    --goat-cinza-musgo: #6B7F7A;
    --goat-cinza-nevoa: #7C8C88;
    --goat-coral: #E87848;
    --goat-coral-claro: #F2926B;
    --goat-creme: #F3F1EB;
    --goat-creme-2: #EAE7DE;
    --goat-creme-3: #E1DDD1;
    --goat-papel: #FFFEFA;
    --goat-salvia: #CFD7D3;
    --goat-musgo: #4F6363;
    --goat-nevoa: #B5C7C2;
    --goat-branco: #FFFFFF;
    --goat-verde-800: #166534;
    --goat-verde-700: #15803D;
    --goat-verde-600: #16A34A;
    --goat-verde-400: #4ADE80;
    --goat-ambar-800: #92400E;
    --goat-ambar-700: #B45309;
    --goat-ambar-600: #D97706;
    --goat-ambar-400: #FBBF24;
    --goat-vermelho-700: #B91C1C;
    --goat-vermelho-600: #DC2626;
    --goat-vermelho-400: #F87171;
    --goat-vermelho-300: #FCA5A5;
    --goat-ciano-800: #155E75;
    --goat-ciano-700: #0E7490;
    --goat-ciano-600: #0891B2;
    --goat-ciano-300: #67E8F9;
    --goat-roxo-700: #7E22CE;
    --goat-roxo-400: #C084FC;
}

/* 2. Classico — literal (tema de antes; sai na fase 6 do plano) */
:root {
    /* tokens antigos (nome de cor) */
    --dourado: #f4c653;
    --dourado-claro: #f7d87a;
    --dourado-texto: #f4c653;
    --bege: #caba91;
    --bege-claro: #e8dcc0;
    --marrom-borda: #675832;
    --marrom-borda-texto: #675832;
    --marrom-borda-fundo: #675832;
    --dourado-icone: #fff;
    --outie-sombra-pesquisa: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
    --preto-marrom: #221d11;
    --marrom-escuro: #342c19;
    --marrom-medio: #483e23;
    --marrom-claro: #5a4d2e;
    --laranja: #f39c12;
    --verde-ok: #2ecc71;
    --vermelho-erro: #e74c3c;
    --vermelho-forte: #c0392b;
    --vermelho-borda: #a93226;
    --azul-info: #3498db;
    --roxo: #9b59b6;
    --amarelo-alerta: #ffc107;
    --shadow-soft: 0 12px 28px rgba(0, 0, 0, 0.22);
    --shadow-highlight: 0 8px 20px rgba(244, 198, 83, 0.18);

    /* semanticos */
    --fundo: #221d11;
    --superficie: #342c19;
    --superficie-2: #483e23;
    --superficie-3: #5a4d2e;
    --borda: #675832;
    --borda-controle: #675832;
    --texto: #caba91;
    --texto-forte: #e8dcc0;
    --texto-suave: #caba91;
    --opacidade-suave: 0.72;
    --opacidade-subtitulo: 0.75;
    --primaria: #f4c653;
    --primaria-escura: #f7d87a;
    --primaria-texto: #f4c653;
    --texto-sobre-primaria: #221d11;
    --texto-sobre-inverso: #221d11;
    --marca: #f4c653;
    --sucesso: #2ecc71;
    --alerta: #ffc107;
    --perigo: #e74c3c;
    --perigo-forte: #c0392b;
    --info: #3498db;
    --sucesso-texto: #2ecc71;
    --alerta-texto: #ffc107;
    --perigo-texto: #e74c3c;
    --info-texto: #3498db;
    --categoria-roxo: #9b59b6;

    /* componente: identidade (so os blocos GOAT pintam com eles) */
    --nav-fundo: rgba(72, 62, 35, 0.96);
    --nav-texto: #caba91;
    --nav-texto-suave: #caba91;
    --nav-realce: #f4c653;
    --nav-borda: #675832;
    --tabela-cabecalho-fundo: rgba(72, 62, 35, 0.95);
    --tabela-cabecalho-texto: #f4c653;
    --outie-palco: transparent;
    --outie-contorno: transparent;
    --outie-palco-display: contents;
    --outie-respiro: 0;
    --outie-respiro-mini: 0;

    /* componente: graficos (Plotly le estes tokens; espelho Python em src/utils/temas.py) */
    --grafico-dourado: #f4c653;
    --grafico-bege: #caba91;
    --grafico-serie: #c9a96a;
    --grafico-fonte: #d4c4a0;
    --grafico-grade: #3a2a1a;
    --grafico-grade-suave: rgba(201, 185, 154, 0.2);
    --grafico-grade-eixo: #eee;
    --grafico-eixo: #5a4a3a;
    --grafico-laranja: #f39c12;
    --grafico-laranja-escuro: #e67e22;
    --grafico-verde: #2ecc71;
    --grafico-verde-aprovado: #4caf50;
    --grafico-vermelho: #e74c3c;
    --grafico-azul: #3498db;
    --grafico-roxo: #9b59b6;
    --grafico-amarelo: #ffc107;
    --grafico-amarelo-status: #f1c40f;
    --grafico-teal: #16a085;
    --grafico-cinza: #95a5a6;
    --grafico-hover: #2a1f12;
    --grafico-fundo: rgba(34,29,17,0.9);
    --grafico-preenchimento: rgba(244, 198, 83, 0.2);
    --grafico-texto-fatia: #fff;
    --grafico-status-reserva: #a89070;
    --grafico-status-finalizado: #4caf50;
    --grafico-status-finalizado-texto: #fff;
    --grafico-status-aguardando-entrega: #f59e0b;
    --grafico-status-aguardando-entrega-texto: #fff;
    --grafico-status-em-atendimento: #3b82f6;
    --grafico-status-em-atendimento-texto: #fff;
    --grafico-status-chamado-cancelado: #6b7280;
    --grafico-status-chamado-cancelado-texto: #fff;
    --grafico-status-em-orcamento: #a78bfa;
    --grafico-status-em-orcamento-texto: #fff;
    --grafico-status-recusado: #ef4444;
    --grafico-status-recusado-texto: #fff;
    --grafico-status-aguardando-aprovacao: #f97316;
    --grafico-status-aguardando-aprovacao-texto: #fff;
    --grafico-status-aguardando-resposta: #ec4899;
    --grafico-status-aguardando-resposta-texto: #fff;
    --grafico-status-aberto: #c9a96a;
    --grafico-status-aberto-texto: #fff;
    /* componente: ROI por regional (texto e barra separados) */
    --roi-eficiente-texto: #4caf50;
    --roi-eficiente-barra: #4caf50;
    --roi-atencao-texto: #c9a96a;
    --roi-atencao-barra: #c9a96a;
    --roi-alto_custo-texto: #e67e22;
    --roi-alto_custo-barra: #e67e22;
    --roi-sem_dados-texto: #6b7280;
    --roi-sem_dados-barra: #6b7280;

    /* papeis novos (literal de antes) */
    --verde-ok-fundo: #2ecc71;
    --vermelho-erro-fundo: #e74c3c;
    --vermelho-forte-fundo: #c0392b;
    --laranja-fundo: #f39c12;
    --amarelo-alerta-fundo: #ffc107;
    --azul-info-fundo: #3498db;
    --roxo-fundo: #9b59b6;
    --verde-ok-texto: #2ecc71;
    --vermelho-erro-texto: #e74c3c;
    --vermelho-forte-texto: #c0392b;
    --laranja-texto: #f39c12;
    --amarelo-alerta-texto: #ffc107;
    --azul-info-texto: #3498db;
    --roxo-texto: #9b59b6;
    --sucesso-solido: #198754;
    --alerta-solido: #fd7e14;
    --perigo-solido: #dc3545;
    --info-solido: #0d6efd;
    --roxo-solido: #9b59b6;
    --neutro-solido: #6c757d;
    --texto-sobre-solido: #fff;
    --sobreposicao: #ffffff;
    --branco-tema: #ffffff;

    /* componente: selos de status e prioridade */
    --selo-aberto-fundo: #0dcaf0;
    --selo-aberto-texto: #000;
    --selo-em-atendimento-fundo: #0d6efd;
    --selo-em-atendimento-texto: #fff;
    --selo-aguardando-aprovacao-fundo: #fd7e14;
    --selo-aguardando-aprovacao-texto: #fff;
    --selo-aguardando-resposta-fundo: #ffc107;
    --selo-aguardando-resposta-texto: #000;
    --selo-aguardando-definicao-interna-fundo: #9b59b6;
    --selo-aguardando-definicao-interna-texto: #fff;
    --selo-em-orcamento-fundo: #16a085;
    --selo-em-orcamento-texto: #fff;
    --selo-aguardando-entrega-fundo: #3498db;
    --selo-aguardando-entrega-texto: #fff;
    --selo-recusado-fundo: #c0392b;
    --selo-recusado-texto: #fff;
    --selo-finalizado-fundo: #198754;
    --selo-finalizado-texto: #fff;
    --selo-chamado-cancelado-fundo: #6c757d;
    --selo-chamado-cancelado-texto: #fff;
    --selo-critico-fundo: #dc3545;
    --selo-critico-texto: #fff;
    --selo-alto-fundo: #fd7e14;
    --selo-alto-texto: #fff;
    --selo-medio-fundo: #ffc107;
    --selo-medio-texto: #000;
    --selo-baixo-fundo: #20c997;
    --selo-baixo-texto: #fff;
    --selo-neutro-texto: #fff;
    --cartao-indicador-brilho: rgba(244, 198, 83, 0.3);

    /* registro de cores literais usadas como TEXTO (color:) */
    --ct-000000: #000;
    --ct-0d6efd: #0d6efd;
    --ct-0dcaf0: #0dcaf0;
    --ct-17a2b8: #17a2b8;
    --ct-198754: #198754;
    --ct-221d11: #221d11;
    --ct-28a745: #28a745;
    --ct-2b2410: #2b2410;
    --ct-3498db: #3498db;
    --ct-4caf50: #4caf50;
    --ct-6c757d: #6c757d;
    --ct-6edff6: #6edff6;
    --ct-75d6a0: #75d6a0;
    --ct-7a6d4f: #7a6d4f;
    --ct-8a7c5f: #8a7c5f;
    --ct-8a7e5e: #8a7e5e;
    --ct-95d5b2: #95d5b2;
    --ct-a5d5f5: #a5d5f5;
    --ct-caba91: #caba91;
    --ct-caba91-a550: rgba(202,186,145,0.55);
    --ct-caba91-a600: rgba(202,186,145,.6);
    --ct-dc3545: #dc3545;
    --ct-ecf0f1: #ecf0f1;
    --ct-f0a79c: #f0a79c;
    --ct-f1a2aa: #f1a2aa;
    --ct-f4c653: #f4c653;
    --ct-f5a5a5: #f5a5a5;
    --ct-f5b8ae: #f5b8ae;
    --ct-f5d5a5: #f5d5a5;
    --ct-f5f5dc-a500: rgba(245,245,220,0.5);
    --ct-fd7e14: #fd7e14;
    --ct-ff6b6b: #ff6b6b;
    --ct-ff8a8a: #ff8a8a;
    --ct-ffc107: #ffc107;
    --ct-ffffff: #fff;
    --ct-campo-foco: #ffffff;
    --ct-painel-a600: rgba(255,255,255,0.6);
    --ct-painel-a800: rgba(255,255,255,0.8);
    --ct-painel-a900: rgba(255,255,255,0.9);
    --ct-ffffff-a600: rgba(255,255,255,0.6);
    --ct-ffffff-a800: rgba(255,255,255,0.8);
    --ct-ffffff-a900: rgba(255,255,255,0.9);
    --ct-e74c3c: #e74c3c;
    --ct-f39c12: #f39c12;
    --ct-2ecc71: #2ecc71;
    /* registro de cores literais (migracao; codigo novo usa semanticos) */
    --c-000000: #000;
    --c-000000-a180: rgba(0,0,0,0.18);
    --c-000000-a200: rgba(0,0,0,0.2);
    --c-000000-a300: rgba(0,0,0,0.3);
    --c-000000-a350: rgba(0,0,0,0.35);
    --c-000000-a400: rgba(0,0,0,0.4);
    --c-000000-a500: rgba(0,0,0,0.5);
    --c-000000-a550: rgba(0,0,0,0.55);
    --c-000000-a700: rgba(0,0,0,0.7);
    --c-0d6efd: #0d6efd;
    --c-0dcaf0: #0dcaf0;
    --c-0dcaf0-a150: rgba(13,202,240,0.15);
    --c-17a2b8: #17a2b8;
    --c-198754: #198754;
    --c-198754-a150: rgba(25,135,84,0.15);
    --c-1a1610: #1a1610;
    --c-1a3a4a: #1a3a4a;
    --c-1a472a: #1a472a;
    --c-1abc9c: #1abc9c;
    --c-1d130c: #1d130c;
    --c-1e1e1e-a980: rgba(30,30,30,0.98);
    --c-221d11: #221d11;
    --c-221d11-a800: rgba(34,29,17,0.8);
    --c-221d11-a990: rgba(34,29,17,0.99);
    --c-282828-a950: rgba(40,40,40,0.95);
    --c-28a745: #28a745;
    --c-28a745-a200: rgba(40,167,69,0.2);
    --c-2a5a6d: #2a5a6d;
    --c-2b2410: #2b2410;
    --c-2c3e50: #2c3e50;
    --c-2d2616: #2d2616;
    --c-2d2616-a980: rgba(45,38,22,0.98);
    --c-2d6a4f: #2d6a4f;
    --c-2e2418: #2e2418;
    --c-2e7d32: #2e7d32;
    --c-2ecc71: #2ecc71;
    --c-2ecc71-a000: rgba(46,204,113,0);
    --c-2ecc71-a050: rgba(46,204,113,0.05);
    --c-2ecc71-a100: rgba(46,204,113,0.1);
    --c-2ecc71-a150: rgba(46,204,113,0.15);
    --c-2ecc71-a700: rgba(46,204,113,0.7);
    --c-342c19: #342c19;
    --c-342c19-a800: rgba(52,44,25,0.8);
    --c-342c19-a980: rgba(52,44,25,0.98);
    --c-342c19-a990: rgba(52,44,25,0.99);
    --c-34495e: #34495e;
    --c-3498db: #3498db;
    --c-3498db-a100: rgba(52,152,219,0.1);
    --c-3498db-a150: rgba(52,152,219,0.15);
    --c-483e23-a300: rgba(72,62,35,0.3);
    --c-483e23-a500: rgba(72,62,35,0.5);
    --c-483e23-a800: rgba(72,62,35,0.8);
    --c-483e23-a900: rgba(72,62,35,0.9);
    --c-483e23-a950: rgba(72,62,35,0.95);
    --c-483e23-a960: rgba(72,62,35,0.96);
    --c-4a1a1a: #4a1a1a;
    --c-4a3a1a: #4a3a1a;
    --c-4caf50: #4caf50;
    --c-4caf50-a120: rgba(76,175,80,0.12);
    --c-5a4632: #5a4632;
    --c-5a4d2e-a350: rgba(90,77,46,0.35);
    --c-675832-a200: rgba(103,88,50,0.2);
    --c-675832-a300: rgba(103,88,50,0.3);
    --c-675832-a500: rgba(103,88,50,0.5);
    --c-675832-a750: rgba(103,88,50,0.75);
    --c-675832-a850: rgba(103,88,50,0.85);
    --c-675832-a900: rgba(103,88,50,0.9);
    --c-675832-a950: rgba(103,88,50,0.95);
    --c-6c757d: #6c757d;
    --c-6d2a2a: #6d2a2a;
    --c-6d5a2a: #6d5a2a;
    --c-6edff6: #6edff6;
    --c-75d6a0: #75d6a0;
    --c-7a6d4f: #7a6d4f;
    --c-856404: #856404;
    --c-8a7c5f: #8a7c5f;
    --c-8a7e5e: #8a7e5e;
    --c-95d5b2: #95d5b2;
    --c-9b59b6: #9b59b6;
    --c-9b59b6-a060: rgba(155,89,182,0.06);
    --c-9b59b6-a080: rgba(155,89,182,0.08);
    --c-a5d5f5: #a5d5f5;
    --c-b02a37: #b02a37;
    --c-b02a37-a150: rgba(176,42,55,0.15);
    --c-b02a37-a180: rgba(176,42,55,0.18);
    --c-caba91: #caba91;
    --c-caba91-a120: rgba(202,186,145,.12);
    --c-caba91-a150: rgba(202,186,145,.15);
    --c-caba91-a200: rgba(202,186,145,.2);
    --c-caba91-a300: rgba(202,186,145,.3);
    --c-caba91-a380: rgba(202,186,145,.38);
    --c-caba91-a550: rgba(202,186,145,0.55);
    --c-caba91-a600: rgba(202,186,145,.6);
    --c-d1c5a7: #d1c5a7;
    --c-d4a832: #d4a832;
    --c-d7ab38: #d7ab38;
    --c-dc3545: #dc3545;
    --c-dc3545-a100: rgba(220,53,69,0.1);
    --c-dc3545-a120: rgba(220,53,69,.12);
    --c-dc3545-a150: rgba(220,53,69,0.15);
    --c-dc3545-a200: rgba(220,53,69,0.2);
    --c-dc3545-a300: rgba(220,53,69,0.3);
    --c-dc3545-a400: rgba(220,53,69,0.4);
    --c-dc3545-a550: rgba(220,53,69,.55);
    --c-dc3545-a600: rgba(220,53,69,.6);
    --c-e67e22: #e67e22;
    --c-e6b347: #e6b347;
    --c-e74c3c: #e74c3c;
    --c-e74c3c-a100: rgba(231,76,60,0.1);
    --c-e74c3c-a150: rgba(231,76,60,0.15);
    --c-ecf0f1: #ecf0f1;
    --c-ef4444: #ef4444;
    --c-f0a79c: #f0a79c;
    --c-f1a2aa: #f1a2aa;
    --c-f1c40f: #f1c40f;
    --c-f2e9d5: #f2e9d5;
    --c-f39c12: #f39c12;
    --c-f39c12-a100: rgba(243,156,18,0.1);
    --c-f39c12-a150: rgba(243,156,18,0.15);
    --c-f4c653: #f4c653;
    --c-f4c653-a045: rgba(244,198,83,0.045);
    --c-f4c653-a050: rgba(244,198,83,0.05);
    --c-f4c653-a060: rgba(244,198,83,0.06);
    --c-f4c653-a080: rgba(244,198,83,0.08);
    --c-f4c653-a100: rgba(244,198,83,0.1);
    --c-f4c653-a120: rgba(244,198,83,0.12);
    --c-f4c653-a140: rgba(244,198,83,0.14);
    --c-f4c653-a150: rgba(244,198,83,0.15);
    --c-f4c653-a200: rgba(244,198,83,0.2);
    --c-f4c653-a250: rgba(244,198,83,0.25);
    --c-f4c653-a280: rgba(244,198,83,0.28);
    --c-f4c653-a300: rgba(244,198,83,0.3);
    --c-f4c653-a350: rgba(244,198,83,0.35);
    --c-f4c653-a400: rgba(244,198,83,0.4);
    --c-f4c653-a450: rgba(244,198,83,.45);
    --c-f4c653-a500: rgba(244,198,83,.5);
    --c-f5a5a5: #f5a5a5;
    --c-f5b8ae: #f5b8ae;
    --c-f5d5a5: #f5d5a5;
    --c-f5f5dc-a500: rgba(245,245,220,0.5);
    --c-f7d87a: #f7d87a;
    --c-f7d96e: #f7d96e;
    --c-fd7e14: #fd7e14;
    --c-ff6b6b: #ff6b6b;
    --c-ff8a8a: #ff8a8a;
    --c-ffb300: #ffb300;
    --c-ffc107: #ffc107;
    --c-ffc107-a150: rgba(255,193,7,0.15);
    --c-ffc107-a200: rgba(255,193,7,0.2);
    --c-ffd700-a150: rgba(255,215,0,0.15);
    --c-ffffff: #fff;
    --c-ffffff-a060: rgba(255,255,255,0.06);
    --c-ffffff-a100: rgba(255,255,255,0.1);
    --c-ffffff-a600: rgba(255,255,255,0.6);
    --c-ffffff-a800: rgba(255,255,255,0.8);
    --c-ffffff-a900: rgba(255,255,255,0.9);
}

/* 3. GOAT Dark */
:root[data-tema="goat_dark"] {
    /* componente: graficos (Plotly le estes tokens; espelho Python em src/utils/temas.py) */
    --grafico-dourado: var(--primaria);
    --grafico-bege: var(--texto-suave);
    --grafico-serie: var(--goat-nevoa);
    --grafico-fonte: var(--texto-suave);
    --grafico-grade: var(--borda);
    --grafico-grade-suave: var(--borda);
    --grafico-grade-eixo: var(--borda);
    --grafico-eixo: var(--borda-controle);
    --grafico-laranja: var(--alerta);
    --grafico-laranja-escuro: var(--goat-coral);
    --grafico-verde: var(--sucesso);
    --grafico-verde-aprovado: var(--sucesso);
    --grafico-vermelho: var(--perigo);
    --grafico-azul: var(--info);
    --grafico-roxo: var(--categoria-roxo);
    --grafico-amarelo: var(--alerta);
    --grafico-amarelo-status: var(--alerta);
    --grafico-teal: var(--goat-coral);
    --grafico-cinza: var(--texto-suave);
    --grafico-hover: var(--superficie);
    --grafico-fundo: var(--superficie);
    /* rgba literal: o Plotly nao entende color-mix() (coral a 20%) */
    --grafico-preenchimento: rgba(232, 120, 72, 0.2);
    --grafico-texto-fatia: var(--goat-branco);
    --grafico-status-reserva: var(--neutro-solido);
    --grafico-status-finalizado: var(--selo-finalizado-fundo);
    --grafico-status-finalizado-texto: var(--selo-finalizado-texto);
    --grafico-status-aguardando-entrega: var(--selo-aguardando-entrega-fundo);
    --grafico-status-aguardando-entrega-texto: var(--selo-aguardando-entrega-texto);
    --grafico-status-em-atendimento: var(--selo-em-atendimento-fundo);
    --grafico-status-em-atendimento-texto: var(--selo-em-atendimento-texto);
    --grafico-status-chamado-cancelado: var(--selo-chamado-cancelado-fundo);
    --grafico-status-chamado-cancelado-texto: var(--selo-chamado-cancelado-texto);
    --grafico-status-em-orcamento: var(--selo-em-orcamento-fundo);
    --grafico-status-em-orcamento-texto: var(--selo-em-orcamento-texto);
    --grafico-status-recusado: var(--selo-recusado-fundo);
    --grafico-status-recusado-texto: var(--selo-recusado-texto);
    --grafico-status-aguardando-aprovacao: var(--selo-aguardando-aprovacao-fundo);
    --grafico-status-aguardando-aprovacao-texto: var(--selo-aguardando-aprovacao-texto);
    --grafico-status-aguardando-resposta: var(--selo-aguardando-resposta-fundo);
    --grafico-status-aguardando-resposta-texto: var(--selo-aguardando-resposta-texto);
    --grafico-status-aberto: var(--selo-aberto-fundo);
    --grafico-status-aberto-texto: var(--selo-aberto-texto);
    /* componente: ROI por regional (texto e barra separados) */
    --roi-eficiente-texto: var(--sucesso-texto);
    --roi-eficiente-barra: var(--sucesso);
    --roi-atencao-texto: var(--alerta-texto);
    --roi-atencao-barra: var(--alerta);
    --roi-alto_custo-texto: var(--perigo-texto);
    --roi-alto_custo-barra: var(--perigo);
    --roi-sem_dados-texto: var(--texto-suave);
    --roi-sem_dados-barra: var(--borda-controle);

    /* componente: identidade fixa — aponta direto para o primitivo (excecao
       nomeada do DESIGN_SYSTEM.md: e petroleo nos DOIS temas, como a lateral do ZipERP) */
    --nav-fundo: var(--goat-petroleo);
    --nav-texto: var(--goat-papel);
    --nav-texto-suave: var(--goat-nevoa);
    --nav-realce: var(--goat-coral);
    --nav-borda: var(--goat-ardosia);
    --tabela-cabecalho-fundo: var(--goat-petroleo);
    --tabela-cabecalho-texto: var(--goat-papel);
    --outie-palco: transparent;
    --outie-contorno: transparent;
    --outie-palco-display: contents;
    --outie-respiro: 0;
    --outie-respiro-mini: 0;
    /* semanticos */
    --fundo: var(--goat-petroleo-escuro);
    --superficie: var(--goat-petroleo);
    --superficie-2: var(--goat-petroleo-2);
    --superficie-3: var(--goat-petroleo-3);
    --borda: var(--goat-ardosia);
    --borda-controle: var(--goat-cinza-nevoa);
    --texto: var(--goat-papel);
    --texto-forte: var(--goat-papel);
    --texto-suave: var(--goat-nevoa);
    --opacidade-suave: 1;
    --opacidade-subtitulo: 1;
    --primaria: var(--goat-coral);
    --primaria-escura: var(--goat-coral-claro);
    --primaria-texto: var(--goat-coral-claro);
    --texto-sobre-primaria: var(--goat-petroleo-escuro);
    --texto-sobre-inverso: var(--goat-petroleo-escuro);
    --marca: var(--goat-coral);
    --sucesso: var(--goat-verde-400);
    --alerta: var(--goat-ambar-400);
    --perigo: var(--goat-vermelho-400);
    --perigo-forte: var(--goat-vermelho-400);
    --info: var(--goat-ciano-300);
    --sucesso-texto: var(--goat-verde-400);
    --alerta-texto: var(--goat-ambar-400);
    --perigo-texto: var(--goat-vermelho-300);
    --info-texto: var(--goat-ciano-300);
    --categoria-roxo: var(--goat-roxo-400);
    --sucesso-solido: var(--goat-verde-700);
    --alerta-solido: var(--goat-ambar-700);
    --perigo-solido: var(--goat-vermelho-700);
    --info-solido: var(--goat-ciano-700);
    --roxo-solido: var(--goat-roxo-700);
    --neutro-solido: var(--goat-musgo);
    --texto-sobre-solido: var(--goat-branco);
    --sobreposicao: var(--goat-branco);
    --branco-tema: var(--goat-branco);
    /* tokens antigos (nome de cor) */
    --dourado: var(--primaria);
    --dourado-claro: var(--primaria-escura);
    --dourado-texto: var(--primaria-texto);
    --bege: var(--texto);
    --bege-claro: var(--texto-forte);
    --marrom-borda: var(--borda);
    --marrom-borda-texto: var(--texto-suave);
    --marrom-borda-fundo: var(--neutro-solido);
    /* icone sobre o coral: escuro (branco daria 2,9:1) */
    --dourado-icone: var(--texto-sobre-primaria);
    --outie-sombra-pesquisa: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
    --preto-marrom: var(--fundo);
    --marrom-escuro: var(--superficie);
    --marrom-medio: var(--superficie-2);
    --marrom-claro: var(--superficie-3);
    --laranja: var(--alerta);
    --verde-ok: var(--sucesso);
    --vermelho-erro: var(--perigo);
    --vermelho-forte: var(--perigo-solido);
    --vermelho-borda: var(--perigo-forte);
    --azul-info: var(--info);
    --roxo: var(--categoria-roxo);
    --amarelo-alerta: var(--alerta);
    --verde-ok-fundo: var(--sucesso-solido);
    --vermelho-erro-fundo: var(--perigo-solido);
    --vermelho-forte-fundo: var(--perigo-solido);
    --laranja-fundo: var(--alerta-solido);
    --amarelo-alerta-fundo: var(--alerta);
    --azul-info-fundo: var(--info-solido);
    --roxo-fundo: var(--roxo-solido);
    --verde-ok-texto: var(--sucesso-texto);
    --vermelho-erro-texto: var(--perigo-texto);
    --vermelho-forte-texto: var(--perigo-texto);
    --laranja-texto: var(--alerta-texto);
    --amarelo-alerta-texto: var(--alerta-texto);
    --azul-info-texto: var(--info-texto);
    --roxo-texto: var(--categoria-roxo);
    --shadow-soft: 0 12px 28px rgb(0 0 0 / 0.22);
    --shadow-highlight: 0 8px 20px color-mix(in srgb, var(--primaria) 18%, transparent);
    /* componente: selos (par validado em tests/test_temas_contraste.py) */
    --selo-aberto-fundo: var(--info-solido);
    --selo-aberto-texto: var(--texto-sobre-solido);
    --selo-em-atendimento-fundo: var(--goat-petroleo-3);
    --selo-em-atendimento-texto: var(--goat-papel);
    --selo-aguardando-aprovacao-fundo: var(--alerta-solido);
    --selo-aguardando-aprovacao-texto: var(--texto-sobre-solido);
    --selo-aguardando-resposta-fundo: var(--goat-ambar-400);
    --selo-aguardando-resposta-texto: var(--goat-petroleo-escuro);
    --selo-aguardando-definicao-interna-fundo: var(--roxo-solido);
    --selo-aguardando-definicao-interna-texto: var(--texto-sobre-solido);
    --selo-em-orcamento-fundo: var(--goat-coral);
    --selo-em-orcamento-texto: var(--goat-petroleo-escuro);
    --selo-aguardando-entrega-fundo: var(--goat-ciano-300);
    --selo-aguardando-entrega-texto: var(--goat-petroleo-escuro);
    --selo-recusado-fundo: var(--perigo-solido);
    --selo-recusado-texto: var(--texto-sobre-solido);
    --selo-finalizado-fundo: var(--sucesso-solido);
    --selo-finalizado-texto: var(--texto-sobre-solido);
    --selo-chamado-cancelado-fundo: var(--neutro-solido);
    --selo-chamado-cancelado-texto: var(--texto-sobre-solido);
    --selo-critico-fundo: var(--perigo-solido);
    --selo-critico-texto: var(--texto-sobre-solido);
    --selo-alto-fundo: var(--alerta-solido);
    --selo-alto-texto: var(--texto-sobre-solido);
    --selo-medio-fundo: var(--goat-ambar-400);
    --selo-medio-texto: var(--goat-petroleo-escuro);
    --selo-baixo-fundo: var(--goat-verde-400);
    --selo-baixo-texto: var(--goat-petroleo-escuro);
    --selo-neutro-texto: var(--texto);
    --cartao-indicador-brilho: color-mix(in srgb, var(--primaria) 30%, transparent);
    /* registro --ct-* (texto) */
    --ct-000000: #000;
    --ct-0d6efd: var(--info-texto);
    --ct-0dcaf0: var(--info-texto);
    --ct-17a2b8: var(--info-texto);
    --ct-198754: var(--sucesso-texto);
    --ct-221d11: var(--texto-sobre-primaria);
    --ct-28a745: var(--sucesso-texto);
    --ct-2b2410: var(--texto-sobre-primaria);
    --ct-2ecc71: var(--sucesso-texto);
    --ct-3498db: var(--info-texto);
    --ct-4caf50: var(--sucesso-texto);
    --ct-6c757d: var(--texto-suave);
    --ct-6edff6: var(--info-texto);
    --ct-75d6a0: var(--sucesso-texto);
    --ct-7a6d4f: var(--texto-suave);
    --ct-8a7c5f: var(--texto-suave);
    --ct-8a7e5e: var(--texto-suave);
    --ct-95d5b2: var(--sucesso-texto);
    --ct-a5d5f5: var(--info-texto);
    --ct-caba91: var(--texto-suave);
    --ct-caba91-a550: color-mix(in srgb, var(--texto-suave) 55%, transparent);
    --ct-caba91-a600: color-mix(in srgb, var(--texto-suave) 60%, transparent);
    --ct-dc3545: var(--perigo-texto);
    --ct-e74c3c: var(--perigo-texto);
    --ct-ecf0f1: var(--texto-forte);
    --ct-f0a79c: var(--perigo-texto);
    --ct-f1a2aa: var(--perigo-texto);
    --ct-f39c12: var(--alerta-texto);
    --ct-f4c653: var(--primaria-texto);
    --ct-f5a5a5: var(--perigo-texto);
    --ct-f5b8ae: var(--perigo-texto);
    --ct-f5d5a5: var(--alerta-texto);
    --ct-f5f5dc-a500: color-mix(in srgb, var(--texto-suave) 50%, transparent);
    --ct-fd7e14: var(--alerta-texto);
    --ct-ff6b6b: var(--perigo-texto);
    --ct-ff8a8a: var(--perigo-texto);
    --ct-ffc107: var(--alerta-texto);
    --ct-ffffff: var(--texto-sobre-solido);
    --ct-campo-foco: var(--texto-forte);
    --ct-painel-a600: var(--texto-suave);
    --ct-painel-a800: var(--texto);
    --ct-painel-a900: var(--texto);
    --ct-ffffff-a600: color-mix(in srgb, var(--texto-sobre-solido) 60%, transparent);
    --ct-ffffff-a800: color-mix(in srgb, var(--texto-sobre-solido) 80%, transparent);
    --ct-ffffff-a900: color-mix(in srgb, var(--texto-sobre-solido) 90%, transparent);
    /* registro --c-* (fundo, borda, sombra) */
    --c-000000: #000;
    --c-000000-a180: rgba(0,0,0,0.18);
    --c-000000-a200: rgba(0,0,0,0.2);
    --c-000000-a300: rgba(0,0,0,0.3);
    --c-000000-a350: rgba(0,0,0,0.35);
    --c-000000-a400: rgba(0,0,0,0.4);
    --c-000000-a500: rgba(0,0,0,0.5);
    --c-000000-a550: rgba(0,0,0,0.55);
    --c-000000-a700: rgba(0,0,0,0.7);
    --c-0d6efd: var(--info-solido);
    --c-0dcaf0: var(--info);
    --c-0dcaf0-a150: color-mix(in srgb, var(--info) 15%, transparent);
    --c-17a2b8: var(--info-solido);
    --c-198754: var(--sucesso-solido);
    --c-198754-a150: color-mix(in srgb, var(--sucesso-solido) 15%, transparent);
    --c-1a1610: var(--fundo);
    --c-1a3a4a: color-mix(in srgb, var(--info) 22%, var(--superficie));
    --c-1a472a: color-mix(in srgb, var(--sucesso) 22%, var(--superficie));
    --c-1abc9c: var(--sucesso-solido);
    --c-1d130c: var(--fundo);
    --c-1e1e1e-a980: color-mix(in srgb, var(--superficie) 98%, transparent);
    --c-221d11: var(--fundo);
    --c-221d11-a800: color-mix(in srgb, var(--fundo) 80%, transparent);
    --c-221d11-a990: color-mix(in srgb, var(--fundo) 99%, transparent);
    --c-282828-a950: color-mix(in srgb, var(--superficie) 95%, transparent);
    --c-28a745: var(--sucesso-solido);
    --c-28a745-a200: color-mix(in srgb, var(--sucesso-solido) 20%, transparent);
    --c-2a5a6d: color-mix(in srgb, var(--info) 22%, var(--superficie));
    --c-2b2410: var(--fundo);
    --c-2c3e50: var(--superficie-2);
    --c-2d2616: var(--fundo);
    --c-2d2616-a980: color-mix(in srgb, var(--fundo) 98%, transparent);
    --c-2d6a4f: var(--sucesso-solido);
    --c-2e2418: var(--fundo);
    --c-2e7d32: var(--sucesso-solido);
    --c-2ecc71: var(--sucesso);
    --c-2ecc71-a000: color-mix(in srgb, var(--sucesso) 0%, transparent);
    --c-2ecc71-a050: color-mix(in srgb, var(--sucesso) 5%, transparent);
    --c-2ecc71-a100: color-mix(in srgb, var(--sucesso) 10%, transparent);
    --c-2ecc71-a150: color-mix(in srgb, var(--sucesso) 15%, transparent);
    --c-2ecc71-a700: color-mix(in srgb, var(--sucesso) 70%, transparent);
    --c-342c19: var(--superficie);
    --c-342c19-a800: color-mix(in srgb, var(--superficie) 80%, transparent);
    --c-342c19-a980: color-mix(in srgb, var(--superficie) 98%, transparent);
    --c-342c19-a990: color-mix(in srgb, var(--superficie) 99%, transparent);
    --c-34495e: var(--superficie-3);
    --c-3498db: var(--info);
    --c-3498db-a100: color-mix(in srgb, var(--info) 10%, transparent);
    --c-3498db-a150: color-mix(in srgb, var(--info) 15%, transparent);
    --c-483e23-a300: color-mix(in srgb, var(--superficie-2) 30%, transparent);
    --c-483e23-a500: color-mix(in srgb, var(--superficie-2) 50%, transparent);
    --c-483e23-a800: color-mix(in srgb, var(--superficie-2) 80%, transparent);
    --c-483e23-a900: color-mix(in srgb, var(--superficie-2) 90%, transparent);
    --c-483e23-a950: color-mix(in srgb, var(--superficie-2) 95%, transparent);
    --c-483e23-a960: color-mix(in srgb, var(--superficie-2) 96%, transparent);
    --c-4a1a1a: color-mix(in srgb, var(--perigo) 22%, var(--superficie));
    --c-4a3a1a: color-mix(in srgb, var(--alerta) 22%, var(--superficie));
    --c-4caf50: var(--sucesso-solido);
    --c-4caf50-a120: color-mix(in srgb, var(--sucesso-solido) 12%, transparent);
    --c-5a4632: var(--superficie-3);
    --c-5a4d2e-a350: color-mix(in srgb, var(--superficie-3) 35%, transparent);
    --c-675832-a200: color-mix(in srgb, var(--borda) 20%, transparent);
    --c-675832-a300: color-mix(in srgb, var(--borda) 30%, transparent);
    --c-675832-a500: color-mix(in srgb, var(--borda) 50%, transparent);
    --c-675832-a750: color-mix(in srgb, var(--borda) 75%, transparent);
    --c-675832-a850: color-mix(in srgb, var(--borda) 85%, transparent);
    --c-675832-a900: color-mix(in srgb, var(--borda) 90%, transparent);
    --c-675832-a950: color-mix(in srgb, var(--borda) 95%, transparent);
    --c-6c757d: var(--neutro-solido);
    --c-6d2a2a: color-mix(in srgb, var(--perigo) 22%, var(--superficie));
    --c-6d5a2a: color-mix(in srgb, var(--alerta) 22%, var(--superficie));
    --c-6edff6: var(--info);
    --c-75d6a0: var(--sucesso);
    --c-7a6d4f: var(--texto-suave);
    --c-856404: var(--alerta-solido);
    --c-8a7c5f: var(--texto-suave);
    --c-8a7e5e: var(--texto-suave);
    --c-95d5b2: var(--sucesso);
    --c-9b59b6: var(--categoria-roxo);
    --c-9b59b6-a060: color-mix(in srgb, var(--categoria-roxo) 6%, transparent);
    --c-9b59b6-a080: color-mix(in srgb, var(--categoria-roxo) 8%, transparent);
    --c-a5d5f5: var(--info);
    --c-b02a37: var(--perigo-solido);
    --c-b02a37-a150: color-mix(in srgb, var(--perigo-solido) 15%, transparent);
    --c-b02a37-a180: color-mix(in srgb, var(--perigo-solido) 18%, transparent);
    --c-caba91: var(--texto-suave);
    --c-caba91-a120: color-mix(in srgb, var(--texto-suave) 12%, transparent);
    --c-caba91-a150: color-mix(in srgb, var(--texto-suave) 15%, transparent);
    --c-caba91-a200: color-mix(in srgb, var(--texto-suave) 20%, transparent);
    --c-caba91-a300: color-mix(in srgb, var(--texto-suave) 30%, transparent);
    --c-caba91-a380: color-mix(in srgb, var(--texto-suave) 38%, transparent);
    --c-caba91-a550: color-mix(in srgb, var(--texto-suave) 55%, transparent);
    --c-caba91-a600: color-mix(in srgb, var(--texto-suave) 60%, transparent);
    --c-d1c5a7: var(--texto-suave);
    --c-d4a832: var(--primaria);
    --c-d7ab38: var(--primaria);
    --c-dc3545: var(--perigo-solido);
    --c-dc3545-a100: color-mix(in srgb, var(--perigo-solido) 10%, transparent);
    --c-dc3545-a120: color-mix(in srgb, var(--perigo-solido) 12%, transparent);
    --c-dc3545-a150: color-mix(in srgb, var(--perigo-solido) 15%, transparent);
    --c-dc3545-a200: color-mix(in srgb, var(--perigo-solido) 20%, transparent);
    --c-dc3545-a300: color-mix(in srgb, var(--perigo-solido) 30%, transparent);
    --c-dc3545-a400: color-mix(in srgb, var(--perigo-solido) 40%, transparent);
    --c-dc3545-a550: color-mix(in srgb, var(--perigo-solido) 55%, transparent);
    --c-dc3545-a600: color-mix(in srgb, var(--perigo-solido) 60%, transparent);
    --c-e67e22: var(--alerta-solido);
    --c-e6b347: var(--primaria);
    --c-e74c3c: var(--perigo);
    --c-e74c3c-a100: color-mix(in srgb, var(--perigo) 10%, transparent);
    --c-e74c3c-a150: color-mix(in srgb, var(--perigo) 15%, transparent);
    --c-ecf0f1: var(--superficie-2);
    --c-ef4444: var(--perigo);
    --c-f0a79c: var(--perigo);
    --c-f1a2aa: var(--perigo);
    --c-f1c40f: var(--alerta);
    --c-f2e9d5: var(--texto-forte);
    --c-f39c12: var(--alerta-solido);
    --c-f39c12-a100: color-mix(in srgb, var(--alerta-solido) 10%, transparent);
    --c-f39c12-a150: color-mix(in srgb, var(--alerta-solido) 15%, transparent);
    --c-f4c653: var(--primaria);
    --c-f4c653-a045: color-mix(in srgb, var(--primaria) 4.5%, transparent);
    --c-f4c653-a050: color-mix(in srgb, var(--primaria) 5%, transparent);
    --c-f4c653-a060: color-mix(in srgb, var(--primaria) 6%, transparent);
    --c-f4c653-a080: color-mix(in srgb, var(--primaria) 8%, transparent);
    --c-f4c653-a100: color-mix(in srgb, var(--primaria) 10%, transparent);
    --c-f4c653-a120: color-mix(in srgb, var(--primaria) 12%, transparent);
    --c-f4c653-a140: color-mix(in srgb, var(--primaria) 14%, transparent);
    --c-f4c653-a150: color-mix(in srgb, var(--primaria) 15%, transparent);
    --c-f4c653-a200: color-mix(in srgb, var(--primaria) 20%, transparent);
    --c-f4c653-a250: color-mix(in srgb, var(--primaria) 25%, transparent);
    --c-f4c653-a280: color-mix(in srgb, var(--primaria) 28%, transparent);
    --c-f4c653-a300: color-mix(in srgb, var(--primaria) 30%, transparent);
    --c-f4c653-a350: color-mix(in srgb, var(--primaria) 35%, transparent);
    --c-f4c653-a400: color-mix(in srgb, var(--primaria) 40%, transparent);
    --c-f4c653-a450: color-mix(in srgb, var(--primaria) 45%, transparent);
    --c-f4c653-a500: color-mix(in srgb, var(--primaria) 50%, transparent);
    --c-f5a5a5: var(--perigo);
    --c-f5b8ae: var(--perigo);
    --c-f5d5a5: var(--alerta);
    --c-f5f5dc-a500: color-mix(in srgb, var(--texto-suave) 50%, transparent);
    --c-f7d87a: var(--primaria-escura);
    --c-f7d96e: var(--primaria);
    --c-fd7e14: var(--alerta-solido);
    --c-ff6b6b: var(--perigo);
    --c-ff8a8a: var(--perigo);
    --c-ffb300: var(--primaria-escura);
    --c-ffc107: var(--alerta);
    --c-ffc107-a150: color-mix(in srgb, var(--alerta) 15%, transparent);
    --c-ffc107-a200: color-mix(in srgb, var(--alerta) 20%, transparent);
    --c-ffd700-a150: color-mix(in srgb, var(--alerta) 15%, transparent);
    --c-ffffff: var(--sobreposicao);
    --c-ffffff-a060: color-mix(in srgb, var(--sobreposicao) 6%, transparent);
    --c-ffffff-a100: color-mix(in srgb, var(--sobreposicao) 10%, transparent);
    --c-ffffff-a600: color-mix(in srgb, var(--sobreposicao) 60%, transparent);
    --c-ffffff-a800: color-mix(in srgb, var(--sobreposicao) 80%, transparent);
    --c-ffffff-a900: color-mix(in srgb, var(--sobreposicao) 90%, transparent);
}

/* 4. GOAT Light */
:root[data-tema="goat_light"] {
    /* componente: graficos (Plotly le estes tokens; espelho Python em src/utils/temas.py) */
    --grafico-dourado: var(--primaria);
    --grafico-bege: var(--texto-suave);
    --grafico-serie: var(--goat-petroleo);
    --grafico-fonte: var(--texto-suave);
    --grafico-grade: var(--borda);
    --grafico-grade-suave: var(--borda);
    --grafico-grade-eixo: var(--borda);
    --grafico-eixo: var(--borda-controle);
    --grafico-laranja: var(--alerta);
    --grafico-laranja-escuro: var(--goat-coral);
    --grafico-verde: var(--sucesso);
    --grafico-verde-aprovado: var(--sucesso);
    --grafico-vermelho: var(--perigo);
    --grafico-azul: var(--info);
    --grafico-roxo: var(--categoria-roxo);
    --grafico-amarelo: var(--alerta);
    --grafico-amarelo-status: var(--alerta);
    --grafico-teal: var(--goat-coral);
    --grafico-cinza: var(--texto-suave);
    --grafico-hover: var(--superficie);
    --grafico-fundo: var(--superficie);
    /* rgba literal: o Plotly nao entende color-mix() (petroleo a 20%) */
    --grafico-preenchimento: rgba(25, 50, 53, 0.2);
    --grafico-texto-fatia: var(--goat-branco);
    --grafico-status-reserva: var(--neutro-solido);
    --grafico-status-finalizado: var(--selo-finalizado-fundo);
    --grafico-status-finalizado-texto: var(--selo-finalizado-texto);
    --grafico-status-aguardando-entrega: var(--selo-aguardando-entrega-fundo);
    --grafico-status-aguardando-entrega-texto: var(--selo-aguardando-entrega-texto);
    --grafico-status-em-atendimento: var(--selo-em-atendimento-fundo);
    --grafico-status-em-atendimento-texto: var(--selo-em-atendimento-texto);
    --grafico-status-chamado-cancelado: var(--selo-chamado-cancelado-fundo);
    --grafico-status-chamado-cancelado-texto: var(--selo-chamado-cancelado-texto);
    --grafico-status-em-orcamento: var(--selo-em-orcamento-fundo);
    --grafico-status-em-orcamento-texto: var(--selo-em-orcamento-texto);
    --grafico-status-recusado: var(--selo-recusado-fundo);
    --grafico-status-recusado-texto: var(--selo-recusado-texto);
    --grafico-status-aguardando-aprovacao: var(--selo-aguardando-aprovacao-fundo);
    --grafico-status-aguardando-aprovacao-texto: var(--selo-aguardando-aprovacao-texto);
    --grafico-status-aguardando-resposta: var(--selo-aguardando-resposta-fundo);
    --grafico-status-aguardando-resposta-texto: var(--selo-aguardando-resposta-texto);
    --grafico-status-aberto: var(--selo-aberto-fundo);
    --grafico-status-aberto-texto: var(--selo-aberto-texto);
    /* componente: ROI por regional (texto e barra separados) */
    --roi-eficiente-texto: var(--sucesso-texto);
    --roi-eficiente-barra: var(--sucesso);
    --roi-atencao-texto: var(--alerta-texto);
    --roi-atencao-barra: var(--alerta);
    --roi-alto_custo-texto: var(--perigo-texto);
    --roi-alto_custo-barra: var(--perigo);
    --roi-sem_dados-texto: var(--texto-suave);
    --roi-sem_dados-barra: var(--borda-controle);

    /* componente: identidade fixa — aponta direto para o primitivo (excecao
       nomeada do DESIGN_SYSTEM.md: e petroleo nos DOIS temas, como a lateral do ZipERP) */
    --nav-fundo: var(--goat-petroleo);
    --nav-texto: var(--goat-papel);
    --nav-texto-suave: var(--goat-nevoa);
    --nav-realce: var(--goat-coral);
    --nav-borda: var(--goat-ardosia);
    --tabela-cabecalho-fundo: var(--goat-petroleo);
    --tabela-cabecalho-texto: var(--goat-papel);
    /* Halo translucido (some nas bordas: sem caixa) + contorno fino petroleo,
       que e o que separa o Outie amarelo do creme. Cor do mascote intacta. */
    --outie-palco: radial-gradient(closest-side, rgb(25 50 53 / 0.16), rgb(25 50 53 / 0.07) 60%, transparent);
    --outie-contorno: var(--goat-petroleo);
    --outie-palco-display: inline-flex;
    --outie-respiro: 10px;
    --outie-respiro-mini: 4px;
    /* semanticos */
    --fundo: var(--goat-creme);
    --superficie: var(--goat-papel);
    --superficie-2: var(--goat-creme-2);
    --superficie-3: var(--goat-creme-3);
    --borda: var(--goat-salvia);
    --borda-controle: var(--goat-cinza-musgo);
    --texto: var(--goat-petroleo);
    --texto-forte: var(--goat-petroleo);
    --texto-suave: var(--goat-musgo);
    --opacidade-suave: 1;
    --opacidade-subtitulo: 1;
    --primaria: var(--goat-petroleo);
    --primaria-escura: var(--goat-petroleo-escuro);
    --primaria-texto: var(--goat-petroleo);
    --texto-sobre-primaria: var(--goat-branco);
    --texto-sobre-inverso: var(--goat-papel);
    --marca: var(--goat-coral);
    --sucesso: var(--goat-verde-600);
    --alerta: var(--goat-ambar-600);
    --perigo: var(--goat-vermelho-600);
    --perigo-forte: var(--goat-vermelho-700);
    --info: var(--goat-ciano-600);
    --sucesso-texto: var(--goat-verde-800);
    --alerta-texto: var(--goat-ambar-800);
    --perigo-texto: var(--goat-vermelho-700);
    --info-texto: var(--goat-ciano-800);
    --categoria-roxo: var(--goat-roxo-700);
    --sucesso-solido: var(--goat-verde-700);
    --alerta-solido: var(--goat-ambar-700);
    --perigo-solido: var(--goat-vermelho-700);
    --info-solido: var(--goat-ciano-700);
    --roxo-solido: var(--goat-roxo-700);
    --neutro-solido: var(--goat-musgo);
    --texto-sobre-solido: var(--goat-branco);
    --sobreposicao: var(--goat-petroleo);
    --branco-tema: var(--goat-papel);
    /* tokens antigos (nome de cor) */
    --dourado: var(--primaria);
    --dourado-claro: var(--primaria-escura);
    --dourado-texto: var(--primaria-texto);
    --bege: var(--texto);
    --bege-claro: var(--texto-forte);
    --marrom-borda: var(--borda);
    --marrom-borda-texto: var(--texto-suave);
    --marrom-borda-fundo: var(--neutro-solido);
    --dourado-icone: var(--texto-sobre-primaria);
    --outie-sombra-pesquisa: drop-shadow(0 4px 8px rgb(0 0 0 / 0.3));
    --preto-marrom: var(--fundo);
    --marrom-escuro: var(--superficie);
    --marrom-medio: var(--superficie-2);
    --marrom-claro: var(--superficie-3);
    --laranja: var(--alerta);
    --verde-ok: var(--sucesso);
    --vermelho-erro: var(--perigo);
    --vermelho-forte: var(--perigo-solido);
    --vermelho-borda: var(--perigo-forte);
    --azul-info: var(--info);
    --roxo: var(--categoria-roxo);
    --amarelo-alerta: var(--alerta);
    --verde-ok-fundo: var(--sucesso-solido);
    --vermelho-erro-fundo: var(--perigo-solido);
    --vermelho-forte-fundo: var(--perigo-solido);
    --laranja-fundo: var(--alerta-solido);
    --amarelo-alerta-fundo: var(--alerta);
    --azul-info-fundo: var(--info-solido);
    --roxo-fundo: var(--roxo-solido);
    --verde-ok-texto: var(--sucesso-texto);
    --vermelho-erro-texto: var(--perigo-texto);
    --vermelho-forte-texto: var(--perigo-texto);
    --laranja-texto: var(--alerta-texto);
    --amarelo-alerta-texto: var(--alerta-texto);
    --azul-info-texto: var(--info-texto);
    --roxo-texto: var(--categoria-roxo);
    --shadow-soft: 0 12px 28px rgb(0 0 0 / 0.22);
    --shadow-highlight: 0 8px 20px color-mix(in srgb, var(--primaria) 18%, transparent);
    /* componente: selos (par validado em tests/test_temas_contraste.py) */
    --selo-aberto-fundo: var(--info-solido);
    --selo-aberto-texto: var(--texto-sobre-solido);
    --selo-em-atendimento-fundo: var(--goat-petroleo-3);
    --selo-em-atendimento-texto: var(--goat-papel);
    --selo-aguardando-aprovacao-fundo: var(--alerta-solido);
    --selo-aguardando-aprovacao-texto: var(--texto-sobre-solido);
    --selo-aguardando-resposta-fundo: var(--goat-ambar-400);
    --selo-aguardando-resposta-texto: var(--goat-petroleo-escuro);
    --selo-aguardando-definicao-interna-fundo: var(--roxo-solido);
    --selo-aguardando-definicao-interna-texto: var(--texto-sobre-solido);
    --selo-em-orcamento-fundo: var(--goat-coral);
    --selo-em-orcamento-texto: var(--goat-petroleo-escuro);
    --selo-aguardando-entrega-fundo: var(--goat-ciano-300);
    --selo-aguardando-entrega-texto: var(--goat-petroleo-escuro);
    --selo-recusado-fundo: var(--perigo-solido);
    --selo-recusado-texto: var(--texto-sobre-solido);
    --selo-finalizado-fundo: var(--sucesso-solido);
    --selo-finalizado-texto: var(--texto-sobre-solido);
    --selo-chamado-cancelado-fundo: var(--neutro-solido);
    --selo-chamado-cancelado-texto: var(--texto-sobre-solido);
    --selo-critico-fundo: var(--perigo-solido);
    --selo-critico-texto: var(--texto-sobre-solido);
    --selo-alto-fundo: var(--alerta-solido);
    --selo-alto-texto: var(--texto-sobre-solido);
    --selo-medio-fundo: var(--goat-ambar-400);
    --selo-medio-texto: var(--goat-petroleo-escuro);
    --selo-baixo-fundo: var(--goat-verde-400);
    --selo-baixo-texto: var(--goat-petroleo-escuro);
    --selo-neutro-texto: var(--texto);
    --cartao-indicador-brilho: color-mix(in srgb, var(--primaria) 30%, transparent);
    /* registro --ct-* (texto) */
    --ct-000000: #000;
    --ct-0d6efd: var(--info-texto);
    --ct-0dcaf0: var(--info-texto);
    --ct-17a2b8: var(--info-texto);
    --ct-198754: var(--sucesso-texto);
    --ct-221d11: var(--texto-sobre-primaria);
    --ct-28a745: var(--sucesso-texto);
    --ct-2b2410: var(--texto-sobre-primaria);
    --ct-2ecc71: var(--sucesso-texto);
    --ct-3498db: var(--info-texto);
    --ct-4caf50: var(--sucesso-texto);
    --ct-6c757d: var(--texto-suave);
    --ct-6edff6: var(--info-texto);
    --ct-75d6a0: var(--sucesso-texto);
    --ct-7a6d4f: var(--texto-suave);
    --ct-8a7c5f: var(--texto-suave);
    --ct-8a7e5e: var(--texto-suave);
    --ct-95d5b2: var(--sucesso-texto);
    --ct-a5d5f5: var(--info-texto);
    --ct-caba91: var(--texto-suave);
    --ct-caba91-a550: color-mix(in srgb, var(--texto-suave) 55%, transparent);
    --ct-caba91-a600: color-mix(in srgb, var(--texto-suave) 60%, transparent);
    --ct-dc3545: var(--perigo-texto);
    --ct-e74c3c: var(--perigo-texto);
    --ct-ecf0f1: var(--texto-forte);
    --ct-f0a79c: var(--perigo-texto);
    --ct-f1a2aa: var(--perigo-texto);
    --ct-f39c12: var(--alerta-texto);
    --ct-f4c653: var(--primaria-texto);
    --ct-f5a5a5: var(--perigo-texto);
    --ct-f5b8ae: var(--perigo-texto);
    --ct-f5d5a5: var(--alerta-texto);
    --ct-f5f5dc-a500: color-mix(in srgb, var(--texto-suave) 50%, transparent);
    --ct-fd7e14: var(--alerta-texto);
    --ct-ff6b6b: var(--perigo-texto);
    --ct-ff8a8a: var(--perigo-texto);
    --ct-ffc107: var(--alerta-texto);
    --ct-ffffff: var(--texto-sobre-solido);
    --ct-campo-foco: var(--texto-forte);
    --ct-painel-a600: var(--texto-suave);
    --ct-painel-a800: var(--texto);
    --ct-painel-a900: var(--texto);
    --ct-ffffff-a600: color-mix(in srgb, var(--texto-sobre-solido) 60%, transparent);
    --ct-ffffff-a800: color-mix(in srgb, var(--texto-sobre-solido) 80%, transparent);
    --ct-ffffff-a900: color-mix(in srgb, var(--texto-sobre-solido) 90%, transparent);
    /* registro --c-* (fundo, borda, sombra) */
    --c-000000: #000;
    --c-000000-a180: rgba(0,0,0,0.18);
    --c-000000-a200: rgba(0,0,0,0.2);
    --c-000000-a300: rgba(0,0,0,0.3);
    --c-000000-a350: rgba(0,0,0,0.35);
    --c-000000-a400: rgba(0,0,0,0.4);
    --c-000000-a500: rgba(0,0,0,0.5);
    --c-000000-a550: rgba(0,0,0,0.55);
    --c-000000-a700: rgba(0,0,0,0.7);
    --c-0d6efd: var(--info-solido);
    --c-0dcaf0: var(--info);
    --c-0dcaf0-a150: color-mix(in srgb, var(--info) 15%, transparent);
    --c-17a2b8: var(--info-solido);
    --c-198754: var(--sucesso-solido);
    --c-198754-a150: color-mix(in srgb, var(--sucesso-solido) 15%, transparent);
    --c-1a1610: var(--fundo);
    --c-1a3a4a: color-mix(in srgb, var(--info) 22%, var(--superficie));
    --c-1a472a: color-mix(in srgb, var(--sucesso) 22%, var(--superficie));
    --c-1abc9c: var(--sucesso-solido);
    --c-1d130c: var(--fundo);
    --c-1e1e1e-a980: color-mix(in srgb, var(--superficie) 98%, transparent);
    --c-221d11: var(--fundo);
    --c-221d11-a800: color-mix(in srgb, var(--fundo) 80%, transparent);
    --c-221d11-a990: color-mix(in srgb, var(--fundo) 99%, transparent);
    --c-282828-a950: color-mix(in srgb, var(--superficie) 95%, transparent);
    --c-28a745: var(--sucesso-solido);
    --c-28a745-a200: color-mix(in srgb, var(--sucesso-solido) 20%, transparent);
    --c-2a5a6d: color-mix(in srgb, var(--info) 22%, var(--superficie));
    --c-2b2410: var(--fundo);
    --c-2c3e50: var(--superficie-2);
    --c-2d2616: var(--fundo);
    --c-2d2616-a980: color-mix(in srgb, var(--fundo) 98%, transparent);
    --c-2d6a4f: var(--sucesso-solido);
    --c-2e2418: var(--fundo);
    --c-2e7d32: var(--sucesso-solido);
    --c-2ecc71: var(--sucesso);
    --c-2ecc71-a000: color-mix(in srgb, var(--sucesso) 0%, transparent);
    --c-2ecc71-a050: color-mix(in srgb, var(--sucesso) 5%, transparent);
    --c-2ecc71-a100: color-mix(in srgb, var(--sucesso) 10%, transparent);
    --c-2ecc71-a150: color-mix(in srgb, var(--sucesso) 15%, transparent);
    --c-2ecc71-a700: color-mix(in srgb, var(--sucesso) 70%, transparent);
    --c-342c19: var(--superficie);
    --c-342c19-a800: color-mix(in srgb, var(--superficie) 80%, transparent);
    --c-342c19-a980: color-mix(in srgb, var(--superficie) 98%, transparent);
    --c-342c19-a990: color-mix(in srgb, var(--superficie) 99%, transparent);
    --c-34495e: var(--superficie-3);
    --c-3498db: var(--info);
    --c-3498db-a100: color-mix(in srgb, var(--info) 10%, transparent);
    --c-3498db-a150: color-mix(in srgb, var(--info) 15%, transparent);
    --c-483e23-a300: color-mix(in srgb, var(--superficie-2) 30%, transparent);
    --c-483e23-a500: color-mix(in srgb, var(--superficie-2) 50%, transparent);
    --c-483e23-a800: color-mix(in srgb, var(--superficie-2) 80%, transparent);
    --c-483e23-a900: color-mix(in srgb, var(--superficie-2) 90%, transparent);
    --c-483e23-a950: color-mix(in srgb, var(--superficie-2) 95%, transparent);
    --c-483e23-a960: color-mix(in srgb, var(--superficie-2) 96%, transparent);
    --c-4a1a1a: color-mix(in srgb, var(--perigo) 22%, var(--superficie));
    --c-4a3a1a: color-mix(in srgb, var(--alerta) 22%, var(--superficie));
    --c-4caf50: var(--sucesso-solido);
    --c-4caf50-a120: color-mix(in srgb, var(--sucesso-solido) 12%, transparent);
    --c-5a4632: var(--superficie-3);
    --c-5a4d2e-a350: color-mix(in srgb, var(--superficie-3) 35%, transparent);
    --c-675832-a200: color-mix(in srgb, var(--borda) 20%, transparent);
    --c-675832-a300: color-mix(in srgb, var(--borda) 30%, transparent);
    --c-675832-a500: color-mix(in srgb, var(--borda) 50%, transparent);
    --c-675832-a750: color-mix(in srgb, var(--borda) 75%, transparent);
    --c-675832-a850: color-mix(in srgb, var(--borda) 85%, transparent);
    --c-675832-a900: color-mix(in srgb, var(--borda) 90%, transparent);
    --c-675832-a950: color-mix(in srgb, var(--borda) 95%, transparent);
    --c-6c757d: var(--neutro-solido);
    --c-6d2a2a: color-mix(in srgb, var(--perigo) 22%, var(--superficie));
    --c-6d5a2a: color-mix(in srgb, var(--alerta) 22%, var(--superficie));
    --c-6edff6: var(--info);
    --c-75d6a0: var(--sucesso);
    --c-7a6d4f: var(--texto-suave);
    --c-856404: var(--alerta-solido);
    --c-8a7c5f: var(--texto-suave);
    --c-8a7e5e: var(--texto-suave);
    --c-95d5b2: var(--sucesso);
    --c-9b59b6: var(--categoria-roxo);
    --c-9b59b6-a060: color-mix(in srgb, var(--categoria-roxo) 6%, transparent);
    --c-9b59b6-a080: color-mix(in srgb, var(--categoria-roxo) 8%, transparent);
    --c-a5d5f5: var(--info);
    --c-b02a37: var(--perigo-solido);
    --c-b02a37-a150: color-mix(in srgb, var(--perigo-solido) 15%, transparent);
    --c-b02a37-a180: color-mix(in srgb, var(--perigo-solido) 18%, transparent);
    --c-caba91: var(--texto-suave);
    --c-caba91-a120: color-mix(in srgb, var(--texto-suave) 12%, transparent);
    --c-caba91-a150: color-mix(in srgb, var(--texto-suave) 15%, transparent);
    --c-caba91-a200: color-mix(in srgb, var(--texto-suave) 20%, transparent);
    --c-caba91-a300: color-mix(in srgb, var(--texto-suave) 30%, transparent);
    --c-caba91-a380: color-mix(in srgb, var(--texto-suave) 38%, transparent);
    --c-caba91-a550: color-mix(in srgb, var(--texto-suave) 55%, transparent);
    --c-caba91-a600: color-mix(in srgb, var(--texto-suave) 60%, transparent);
    --c-d1c5a7: var(--texto-suave);
    --c-d4a832: var(--primaria);
    --c-d7ab38: var(--primaria);
    --c-dc3545: var(--perigo-solido);
    --c-dc3545-a100: color-mix(in srgb, var(--perigo-solido) 10%, transparent);
    --c-dc3545-a120: color-mix(in srgb, var(--perigo-solido) 12%, transparent);
    --c-dc3545-a150: color-mix(in srgb, var(--perigo-solido) 15%, transparent);
    --c-dc3545-a200: color-mix(in srgb, var(--perigo-solido) 20%, transparent);
    --c-dc3545-a300: color-mix(in srgb, var(--perigo-solido) 30%, transparent);
    --c-dc3545-a400: color-mix(in srgb, var(--perigo-solido) 40%, transparent);
    --c-dc3545-a550: color-mix(in srgb, var(--perigo-solido) 55%, transparent);
    --c-dc3545-a600: color-mix(in srgb, var(--perigo-solido) 60%, transparent);
    --c-e67e22: var(--alerta-solido);
    --c-e6b347: var(--primaria);
    --c-e74c3c: var(--perigo);
    --c-e74c3c-a100: color-mix(in srgb, var(--perigo) 10%, transparent);
    --c-e74c3c-a150: color-mix(in srgb, var(--perigo) 15%, transparent);
    --c-ecf0f1: var(--superficie-2);
    --c-ef4444: var(--perigo);
    --c-f0a79c: var(--perigo);
    --c-f1a2aa: var(--perigo);
    --c-f1c40f: var(--alerta);
    --c-f2e9d5: var(--texto-forte);
    --c-f39c12: var(--alerta-solido);
    --c-f39c12-a100: color-mix(in srgb, var(--alerta-solido) 10%, transparent);
    --c-f39c12-a150: color-mix(in srgb, var(--alerta-solido) 15%, transparent);
    --c-f4c653: var(--primaria);
    --c-f4c653-a045: color-mix(in srgb, var(--primaria) 4.5%, transparent);
    --c-f4c653-a050: color-mix(in srgb, var(--primaria) 5%, transparent);
    --c-f4c653-a060: color-mix(in srgb, var(--primaria) 6%, transparent);
    --c-f4c653-a080: color-mix(in srgb, var(--primaria) 8%, transparent);
    --c-f4c653-a100: color-mix(in srgb, var(--primaria) 10%, transparent);
    --c-f4c653-a120: color-mix(in srgb, var(--primaria) 12%, transparent);
    --c-f4c653-a140: color-mix(in srgb, var(--primaria) 14%, transparent);
    --c-f4c653-a150: color-mix(in srgb, var(--primaria) 15%, transparent);
    --c-f4c653-a200: color-mix(in srgb, var(--primaria) 20%, transparent);
    --c-f4c653-a250: color-mix(in srgb, var(--primaria) 25%, transparent);
    --c-f4c653-a280: color-mix(in srgb, var(--primaria) 28%, transparent);
    --c-f4c653-a300: color-mix(in srgb, var(--primaria) 30%, transparent);
    --c-f4c653-a350: color-mix(in srgb, var(--primaria) 35%, transparent);
    --c-f4c653-a400: color-mix(in srgb, var(--primaria) 40%, transparent);
    --c-f4c653-a450: color-mix(in srgb, var(--primaria) 45%, transparent);
    --c-f4c653-a500: color-mix(in srgb, var(--primaria) 50%, transparent);
    --c-f5a5a5: var(--perigo);
    --c-f5b8ae: var(--perigo);
    --c-f5d5a5: var(--alerta);
    --c-f5f5dc-a500: color-mix(in srgb, var(--texto-suave) 50%, transparent);
    --c-f7d87a: var(--primaria-escura);
    --c-f7d96e: var(--primaria);
    --c-fd7e14: var(--alerta-solido);
    --c-ff6b6b: var(--perigo);
    --c-ff8a8a: var(--perigo);
    --c-ffb300: var(--primaria-escura);
    --c-ffc107: var(--alerta);
    --c-ffc107-a150: color-mix(in srgb, var(--alerta) 15%, transparent);
    --c-ffc107-a200: color-mix(in srgb, var(--alerta) 20%, transparent);
    --c-ffd700-a150: color-mix(in srgb, var(--alerta) 15%, transparent);
    --c-ffffff: var(--sobreposicao);
    --c-ffffff-a060: color-mix(in srgb, var(--sobreposicao) 6%, transparent);
    --c-ffffff-a100: color-mix(in srgb, var(--sobreposicao) 10%, transparent);
    --c-ffffff-a600: color-mix(in srgb, var(--sobreposicao) 60%, transparent);
    --c-ffffff-a800: color-mix(in srgb, var(--sobreposicao) 80%, transparent);
    --c-ffffff-a900: color-mix(in srgb, var(--sobreposicao) 90%, transparent);
}

/* 5. Identidade GOAT (os dois temas) */
/* Navbar e menu lateral em petroleo com texto creme, como a lateral do ZipERP.
   Os tokens sao redefinidos DENTRO deles: um apelido como --bege ja chega
   computado do :root, entao sobrescrever so --texto nao bastaria. */
:root[data-tema^="goat_"] .navbar,
:root[data-tema^="goat_"] .mobile-sidebar {
    background: var(--nav-fundo) !important;
    border-color: var(--nav-borda) !important;
    --texto: var(--nav-texto);
    --texto-forte: var(--nav-texto);
    --texto-suave: var(--nav-texto-suave);
    --bege: var(--nav-texto);
    --bege-claro: var(--nav-texto);
    --dourado: var(--nav-realce);
    --dourado-claro: var(--goat-coral-claro);
    --dourado-texto: var(--goat-coral-claro);
    --primaria-texto: var(--goat-coral-claro);
    --primaria: var(--nav-realce);
    --primaria-escura: var(--goat-coral-claro);
    --texto-sobre-primaria: var(--goat-petroleo-escuro);
    --borda: var(--nav-borda);
    --marrom-borda: var(--nav-borda);
    --superficie: var(--goat-petroleo);
    --superficie-2: var(--goat-petroleo-2);
    --superficie-3: var(--goat-petroleo-3);
    --marrom-escuro: var(--goat-petroleo);
    --marrom-medio: var(--goat-petroleo-2);
    --marrom-claro: var(--goat-petroleo-3);
    --preto-marrom: var(--goat-petroleo-escuro);
    --sobreposicao: var(--goat-branco);
    color: var(--nav-texto);
}

/* Marca "OuTicket" no coral exato do ZipERP (texto grande: 4,66:1 sobre petroleo). */
:root[data-tema^="goat_"] .navbar-brand,
:root[data-tema^="goat_"] .sidebar-brand {
    color: var(--marca) !important;
}

/* Menus suspensos da navbar: o fundo deles (--c-342c19-a980) chega resolvido do
   :root e seria creme no Light, sob o texto creme da navbar. */
:root[data-tema^="goat_"] .navbar .dropdown-menu {
    background: var(--goat-petroleo-2);
    border-color: var(--nav-borda);
}
:root[data-tema^="goat_"] .navbar .dropdown-menu .dropdown-item:hover,
:root[data-tema^="goat_"] .navbar .dropdown-menu .dropdown-item:focus,
:root[data-tema^="goat_"] .navbar .dropdown-menu .dropdown-item.active {
    background: rgb(255 254 250 / 0.08);
}
:root[data-tema^="goat_"] .navbar .dropdown-divider {
    border-color: var(--nav-borda);
}

:root[data-tema^="goat_"] .table thead th {
    background: var(--tabela-cabecalho-fundo);
    color: var(--tabela-cabecalho-texto);
}

/* Titulo de pagina em serifa, como o ZipERP (so o titulo da pagina). */
:root[data-tema^="goat_"] .page-title,
:root[data-tema^="goat_"] .ticket-title,
:root[data-tema^="goat_"] .selecao-title {
    font-family: Georgia, "Times New Roman", serif;
    letter-spacing: 0;
}

/* Foco visivel com a cor de acao do tema. */
:root[data-tema^="goat_"] *:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--primaria) 65%, transparent);
    outline-offset: 1px;
}

/* Componentes do Bootstrap nos GOAT: as variantes usavam a paleta padrao do
   Bootstrap (ciano, amarelo, verde vivos), fora da familia e com contraste baixo.
   Botao solido = tom "solido" do estado + texto branco (AA nos dois temas). */
:root[data-tema^="goat_"] .btn-success {
    --bs-btn-color: var(--texto-sobre-solido);
    --bs-btn-bg: var(--sucesso-solido);
    --bs-btn-border-color: var(--sucesso-solido);
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: color-mix(in srgb, var(--sucesso-solido) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--sucesso-solido) 82%, #000);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: color-mix(in srgb, var(--sucesso-solido) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--sucesso-solido) 82%, #000);
    --bs-btn-disabled-color: var(--texto-sobre-solido);
    --bs-btn-disabled-bg: var(--sucesso-solido);
    --bs-btn-disabled-border-color: var(--sucesso-solido);
}
:root[data-tema^="goat_"] .btn-outline-success {
    --bs-btn-color: var(--sucesso-texto);
    --bs-btn-border-color: currentColor;
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: var(--sucesso-solido);
    --bs-btn-hover-border-color: var(--sucesso-solido);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: var(--sucesso-solido);
    --bs-btn-active-border-color: var(--sucesso-solido);
    --bs-btn-disabled-color: var(--sucesso-texto);
    --bs-btn-disabled-border-color: currentColor;
}
:root[data-tema^="goat_"] .text-success { color: var(--sucesso-texto) !important; }
:root[data-tema^="goat_"] .btn-danger {
    --bs-btn-color: var(--texto-sobre-solido);
    --bs-btn-bg: var(--perigo-solido);
    --bs-btn-border-color: var(--perigo-solido);
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: color-mix(in srgb, var(--perigo-solido) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--perigo-solido) 82%, #000);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: color-mix(in srgb, var(--perigo-solido) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--perigo-solido) 82%, #000);
    --bs-btn-disabled-color: var(--texto-sobre-solido);
    --bs-btn-disabled-bg: var(--perigo-solido);
    --bs-btn-disabled-border-color: var(--perigo-solido);
}
:root[data-tema^="goat_"] .btn-outline-danger {
    --bs-btn-color: var(--perigo-texto);
    --bs-btn-border-color: currentColor;
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: var(--perigo-solido);
    --bs-btn-hover-border-color: var(--perigo-solido);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: var(--perigo-solido);
    --bs-btn-active-border-color: var(--perigo-solido);
    --bs-btn-disabled-color: var(--perigo-texto);
    --bs-btn-disabled-border-color: currentColor;
}
:root[data-tema^="goat_"] .text-danger { color: var(--perigo-texto) !important; }
:root[data-tema^="goat_"] .btn-warning {
    --bs-btn-color: var(--texto-sobre-solido);
    --bs-btn-bg: var(--alerta-solido);
    --bs-btn-border-color: var(--alerta-solido);
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: color-mix(in srgb, var(--alerta-solido) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--alerta-solido) 82%, #000);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: color-mix(in srgb, var(--alerta-solido) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--alerta-solido) 82%, #000);
    --bs-btn-disabled-color: var(--texto-sobre-solido);
    --bs-btn-disabled-bg: var(--alerta-solido);
    --bs-btn-disabled-border-color: var(--alerta-solido);
}
:root[data-tema^="goat_"] .btn-outline-warning {
    --bs-btn-color: var(--alerta-texto);
    --bs-btn-border-color: currentColor;
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: var(--alerta-solido);
    --bs-btn-hover-border-color: var(--alerta-solido);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: var(--alerta-solido);
    --bs-btn-active-border-color: var(--alerta-solido);
    --bs-btn-disabled-color: var(--alerta-texto);
    --bs-btn-disabled-border-color: currentColor;
}
:root[data-tema^="goat_"] .text-warning { color: var(--alerta-texto) !important; }
:root[data-tema^="goat_"] .btn-info {
    --bs-btn-color: var(--texto-sobre-solido);
    --bs-btn-bg: var(--info-solido);
    --bs-btn-border-color: var(--info-solido);
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: color-mix(in srgb, var(--info-solido) 82%, #000);
    --bs-btn-hover-border-color: color-mix(in srgb, var(--info-solido) 82%, #000);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: color-mix(in srgb, var(--info-solido) 82%, #000);
    --bs-btn-active-border-color: color-mix(in srgb, var(--info-solido) 82%, #000);
    --bs-btn-disabled-color: var(--texto-sobre-solido);
    --bs-btn-disabled-bg: var(--info-solido);
    --bs-btn-disabled-border-color: var(--info-solido);
}
:root[data-tema^="goat_"] .btn-outline-info {
    --bs-btn-color: var(--info-texto);
    --bs-btn-border-color: currentColor;
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: var(--info-solido);
    --bs-btn-hover-border-color: var(--info-solido);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: var(--info-solido);
    --bs-btn-active-border-color: var(--info-solido);
    --bs-btn-disabled-color: var(--info-texto);
    --bs-btn-disabled-border-color: currentColor;
}
:root[data-tema^="goat_"] .text-info { color: var(--info-texto) !important; }
:root[data-tema^="goat_"] .bg-success { background-color: var(--sucesso-solido) !important; }
:root[data-tema^="goat_"] .bg-danger { background-color: var(--perigo-solido) !important; }
:root[data-tema^="goat_"] .bg-info { background-color: var(--info-solido) !important; }
:root[data-tema^="goat_"] .bg-warning { background-color: var(--alerta) !important; }
:root[data-tema^="goat_"] .bg-primary { background-color: var(--primaria) !important; }
:root[data-tema^="goat_"] .table-dark {
    --bs-table-bg: var(--superficie);
    --bs-table-color: var(--texto);
    --bs-table-border-color: var(--borda);
    --bs-table-striped-bg: var(--superficie-2);
    --bs-table-striped-color: var(--texto);
    --bs-table-hover-bg: var(--superficie-3);
    --bs-table-hover-color: var(--texto);
}

:root[data-tema^="goat_"] .btn-outline-secondary {
    --bs-btn-color: var(--texto-suave);
    --bs-btn-border-color: var(--borda-controle);
    --bs-btn-hover-color: var(--texto-sobre-solido);
    --bs-btn-hover-bg: var(--neutro-solido);
    --bs-btn-hover-border-color: var(--neutro-solido);
    --bs-btn-active-color: var(--texto-sobre-solido);
    --bs-btn-active-bg: var(--neutro-solido);
    --bs-btn-active-border-color: var(--neutro-solido);
}
:root[data-tema^="goat_"] {
    --bs-code-color: var(--categoria-roxo);
}

/* Tabelas do Bootstrap nos GOAT: sem isto o modo do Bootstrap pinta a tabela de
   cinza #212529 (Dark) ou branco puro (Light), fora da paleta. */
:root[data-tema^="goat_"] .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--texto);
    --bs-table-border-color: var(--borda);
    --bs-table-striped-bg: var(--superficie-2);
    --bs-table-striped-color: var(--texto);
    --bs-table-hover-bg: var(--superficie-2);
    --bs-table-hover-color: var(--texto);
    --bs-table-active-bg: var(--superficie-3);
    --bs-table-active-color: var(--texto);
}

/* Texto de estado sobre petroleo (navbar e lateral): tons claros nos dois temas. */
:root[data-tema^="goat_"] .navbar,
:root[data-tema^="goat_"] .mobile-sidebar {
    --sucesso-texto: var(--goat-verde-400);
    --alerta-texto: var(--goat-ambar-400);
    /* 300: os links da lateral tem opacidade 0.8 (app.css .sidebar-footer-link) */
    --perigo-texto: var(--goat-vermelho-300);
    --info-texto: var(--goat-ciano-300);
}


/* Contorno do Outie no GOAT Light: 1px petroleo colado na silhueta (drop-shadow
   segue o alfa da arte; nao recorta nem muda a cor do mascote). */
:root[data-tema="goat_light"] .outie-palco > img {
    filter: drop-shadow(0 0 0.6px var(--outie-contorno)) drop-shadow(0 0 0.6px var(--outie-contorno))
        drop-shadow(0 3px 6px rgb(25 50 53 / 0.18));
}

/* 6. Amostras (seletor de tema e vitrine do design system).
   Unico lugar fora dos blocos onde primitivo e usado: a amostra E a paleta. */
.tema-amostra--goat_light {
    background: linear-gradient(135deg, var(--goat-creme) 0 55%, var(--goat-petroleo) 55% 80%, var(--goat-coral) 80%);
}
.tema-amostra--goat_dark {
    background: linear-gradient(135deg, var(--goat-petroleo-escuro) 0 55%, var(--goat-petroleo) 55% 80%, var(--goat-coral) 80%);
}

/* Amostras dos primitivos para a vitrine (/admin/design-system). */
.ds-amostra--goat-petroleo { background: var(--goat-petroleo); }
.ds-amostra--goat-petroleo-escuro { background: var(--goat-petroleo-escuro); }
.ds-amostra--goat-petroleo-2 { background: var(--goat-petroleo-2); }
.ds-amostra--goat-petroleo-3 { background: var(--goat-petroleo-3); }
.ds-amostra--goat-ardosia { background: var(--goat-ardosia); }
.ds-amostra--goat-cinza-musgo { background: var(--goat-cinza-musgo); }
.ds-amostra--goat-cinza-nevoa { background: var(--goat-cinza-nevoa); }
.ds-amostra--goat-coral { background: var(--goat-coral); }
.ds-amostra--goat-coral-claro { background: var(--goat-coral-claro); }
.ds-amostra--goat-creme { background: var(--goat-creme); }
.ds-amostra--goat-creme-2 { background: var(--goat-creme-2); }
.ds-amostra--goat-creme-3 { background: var(--goat-creme-3); }
.ds-amostra--goat-papel { background: var(--goat-papel); }
.ds-amostra--goat-salvia { background: var(--goat-salvia); }
.ds-amostra--goat-musgo { background: var(--goat-musgo); }
.ds-amostra--goat-nevoa { background: var(--goat-nevoa); }
.ds-amostra--goat-branco { background: var(--goat-branco); }
.ds-amostra--goat-verde-800 { background: var(--goat-verde-800); }
.ds-amostra--goat-verde-700 { background: var(--goat-verde-700); }
.ds-amostra--goat-verde-600 { background: var(--goat-verde-600); }
.ds-amostra--goat-verde-400 { background: var(--goat-verde-400); }
.ds-amostra--goat-ambar-800 { background: var(--goat-ambar-800); }
.ds-amostra--goat-ambar-700 { background: var(--goat-ambar-700); }
.ds-amostra--goat-ambar-600 { background: var(--goat-ambar-600); }
.ds-amostra--goat-ambar-400 { background: var(--goat-ambar-400); }
.ds-amostra--goat-vermelho-700 { background: var(--goat-vermelho-700); }
.ds-amostra--goat-vermelho-600 { background: var(--goat-vermelho-600); }
.ds-amostra--goat-vermelho-400 { background: var(--goat-vermelho-400); }
.ds-amostra--goat-vermelho-300 { background: var(--goat-vermelho-300); }
.ds-amostra--goat-ciano-800 { background: var(--goat-ciano-800); }
.ds-amostra--goat-ciano-700 { background: var(--goat-ciano-700); }
.ds-amostra--goat-ciano-600 { background: var(--goat-ciano-600); }
.ds-amostra--goat-ciano-300 { background: var(--goat-ciano-300); }
.ds-amostra--goat-roxo-700 { background: var(--goat-roxo-700); }
.ds-amostra--goat-roxo-400 { background: var(--goat-roxo-400); }