/* Tokens de tema — marca Utak (slate + teal) */

/* Pré-carregamento de tema (evita flash antes do JS) */
html.tema-pre-escuro body.corpo-login {
  background: #0b1018;
  color: #e8eaed;
}

html.tema-pre-claro body.corpo-login {
  background: #f1f5f9;
  color: #0f172a;
}

/* Primeira pintura dos painéis (antes do JS aplicar tema) */
html.tema-pre-escuro body.layout-app {
  background: #0c0f14;
  color: #e8eaef;
}

html.tema-pre-claro body.layout-app {
  background: #f0f2f7;
  color: #0f172a;
}

:root {
  --utak-marca-escuro: #0f172a;
  --utak-marca-teal: #0d9488;
  --utak-marca-teal-forte: #0f766e;
  --utak-marca-teal-claro: #5eead4;
  --utak-marca-teal-dim: rgba(13, 148, 136, 0.18);
  --utak-raio: 12px;
  --utak-raio-sm: 10px;
  --utak-sombra-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.04);
  --utak-sombra-elevada: 0 12px 40px rgba(0, 0, 0, 0.12);
}

/* Tema escuro (padrão) */
body.tema-escuro {
  --utak-fundo: #0b1018;
  --utak-fundo-elevado: #151c28;
  --utak-fundo-painel: #0f1419;
  --utak-fundo-campo: #0c1119;
  --utak-texto: #e8eaed;
  --utak-texto-suave: #94a3b8;
  --utak-borda: rgba(255, 255, 255, 0.09);
  --utak-nav-hover: rgba(255, 255, 255, 0.06);
  --utak-accent-dim: rgba(13, 148, 136, 0.22);
  --utak-accent-texto: #ccfbf1;
  background: var(--utak-fundo);
  color: var(--utak-texto);
}

/* Tema claro */
body.tema-claro {
  --utak-fundo: #f1f5f9;
  --utak-fundo-elevado: #ffffff;
  --utak-fundo-painel: #f8fafc;
  --utak-fundo-campo: #ffffff;
  --utak-texto: #0f172a;
  --utak-texto-suave: #64748b;
  --utak-borda: #e2e8f0;
  --utak-nav-hover: #f1f5f9;
  --utak-accent-dim: #ccfbf1;
  --utak-accent-texto: #134e4a;
  background: var(--utak-fundo);
  color: var(--utak-texto);
}

/* Portal: cor primária do tenant (menu ativo; barra superior igual à administração) */
body.portal-cliente .nav-lateral-item--ativo {
  background: color-mix(in srgb, var(--cor-primaria-portal, var(--utak-marca-teal)) 22%, transparent) !important;
  border-color: color-mix(in srgb, var(--cor-primaria-portal, var(--utak-marca-teal-claro)) 55%, transparent) !important;
}

body.portal-cliente.tema-escuro .nav-lateral-item--ativo {
  color: var(--cor-primaria-portal, var(--utak-accent-texto));
}

body.portal-cliente.tema-claro .nav-lateral-item--ativo {
  color: var(--cor-primaria-portal, var(--utak-accent-texto));
}

/* Toggle tema: sol no escuro, lua no claro */
body.tema-escuro .icone-tema-sol { display: inline-flex; }
body.tema-escuro .icone-tema-lua { display: none; }
body.tema-claro .icone-tema-sol { display: none; }
body.tema-claro .icone-tema-lua { display: inline-flex; }

/* Marca horizontal por tema */
.marca-horizontal--escuro { display: none; }
body.tema-escuro .marca-horizontal--claro { display: none; }
body.tema-escuro .marca-horizontal--escuro { display: block; }
body.tema-claro .marca-horizontal--escuro { display: none; }
body.tema-claro .marca-horizontal--claro { display: block; }

/*
 * Painéis (administração + portal): paleta e raios.
 * Escopo body.layout-app — não altera a tela de login (.corpo-login sem .layout-app).
 */
body.layout-app.tema-claro {
  --utak-fundo: #f0f2f7;
  --utak-fundo-elevado: #ffffff;
  --utak-fundo-painel: #f0f2f7;
  --utak-fundo-campo: #f8fafc;
  --utak-fundo-secao: #f8fafc;
  --utak-card: #ffffff;
  --utak-fundo-cartao: var(--utak-card);
  --utak-borda-suave: var(--utak-borda);
  --utak-texto: #0f172a;
  --utak-texto-suave: #64748b;
  --utak-borda: rgba(15, 23, 42, 0.1);
  --utak-nav-hover: rgba(15, 23, 42, 0.06);
  --utak-accent-dim: rgba(13, 148, 136, 0.14);
  --utak-accent-texto: #0f766e;
  --utak-barra-bg: rgba(255, 255, 255, 0.92);
  --utak-sombra-card: 0 12px 40px rgba(15, 23, 42, 0.12);
  --utak-sombra-elevada: 0 12px 40px rgba(15, 23, 42, 0.12);
  --utak-avatar-1: #0d9488;
  --utak-avatar-2: #0f766e;
  --utak-raio: 14px;
  --utak-raio-sm: 10px;
  background: var(--utak-fundo);
  color: var(--utak-texto);
}

body.layout-app.tema-escuro {
  --utak-fundo: #0c0f14;
  --utak-fundo-elevado: #121824;
  --utak-fundo-painel: #0c0f14;
  --utak-fundo-campo: rgba(0, 0, 0, 0.25);
  --utak-fundo-secao: #161d2a;
  --utak-card: #161d2a;
  --utak-fundo-cartao: var(--utak-card);
  --utak-borda-suave: var(--utak-borda);
  --utak-texto: #e8eaef;
  --utak-texto-suave: #9aa3b5;
  --utak-borda: rgba(255, 255, 255, 0.08);
  --utak-nav-hover: rgba(255, 255, 255, 0.05);
  --utak-accent-dim: rgba(45, 212, 191, 0.18);
  --utak-accent-texto: #2dd4bf;
  --utak-barra-bg: rgba(18, 24, 36, 0.92);
  --utak-sombra-card: none;
  --utak-sombra-elevada: 0 16px 48px rgba(0, 0, 0, 0.45);
  --utak-marca-teal: #2dd4bf;
  --utak-marca-teal-forte: #14b8a6;
  --utak-marca-teal-claro: #5eead4;
  --utak-marca-teal-dim: rgba(45, 212, 191, 0.18);
  --utak-avatar-1: #14b8a6;
  --utak-avatar-2: #0f766e;
  --utak-raio: 14px;
  --utak-raio-sm: 10px;
  background: var(--utak-fundo);
  color: var(--utak-texto);
}