/*
 * ============================================================
 * Arquivo: temas-claro-escuro/assets/gbl-tema.css
 * Projeto: Law Thesis
 * Pasta:   temas-claro-escuro/assets
 * Módulo:  Motor de Tema — CENTRAL DE CORES (tokens claro/escuro)
 * ============================================================
 * Descrição:
 *   Fonte ÚNICA de verdade das cores do design system. Define os
 *   tokens semânticos (--lt-*) em duas versões: escuro (padrão, no
 *   :root) e claro (:root[data-tema="claro"], setado pelo motor JS).
 *   Cada módulo deve APONTAR suas variáveis locais para estes tokens
 *   (ex.: --aa-verde: var(--lt-brand)) em vez de cravar hexa — assim
 *   o site inteiro obedece ao botão de tema sem "brigar".
 *
 *   Trocar uma cor da marca? Edite AQUI, num lugar só.
 *
 * Prefixo dos tokens: --lt-  (Law Thesis)
 * Consumido por: motor JS (gbl-tema.js) + módulos migrados (Hero, ...)
 * ============================================================
 */

:root {
	color-scheme: dark;

	/* ===== TEMA ESCURO (padrão atual do site) ===== */

	/* Fundos e superfícies (escala do mais fundo ao mais elevado) */
	--lt-bg:           #0A0908;              /* fundo da página              */
	--lt-bg-elev:      #1E1D16;              /* superfície elevada (painéis) */
	--lt-bg-card:      #1B1A13;              /* cartão padrão                */
	--lt-bg-card-2:    #16150F;              /* cartão aninhado / mais fundo */
	--lt-surface:      rgba(255,255,255,.06); /* "vidro" sobre o fundo       */

	/* Bordas */
	--lt-border:       rgba(255,255,255,.16); /* borda padrão                */
	--lt-border-soft:  rgba(255,255,255,.09); /* borda sutil                 */
	--lt-line:         #2B281F;              /* borda/ divisor sólido        */

	/* Texto */
	--lt-text-strong:  #FFFFFF;              /* títulos / máximo contraste   */
	--lt-text:         #EDE6DC;              /* corpo forte                  */
	--lt-text-soft:    #CFCBBE;              /* corpo (levemente mais suave) */
	--lt-hook:         #D7D9E0;              /* destaque de apoio            */
	--lt-text-muted:   #9A9DA6;              /* texto secundário             */
	--lt-text-faint:   #857F6B;              /* texto terciário              */

	/* Marca (verde) */
	--lt-brand:        #2FB877;              /* verde base                   */
	--lt-brand-strong: #0FA958;              /* verde escuro (degradê)       */
	--lt-brand-soft:   #2FD06E;              /* verde médio (luz/botão)      */
	--lt-brand-weak:   rgba(47,184,119,.10); /* verde translúcido (selo)     */
	--lt-brand-line:   rgba(47,184,119,.35); /* borda verde translúcida      */
	--lt-brand-deep:   #157A4E;              /* verde profundo (guias/plano) */
	--lt-brand-panel:  linear-gradient(160deg,#1B2A1E 0%,#13201A 100%); /* card destaque */
	--lt-on-brand:     #0A0908;              /* texto/ícone sobre o verde    */

	/* Status / etiquetas — mantêm a COR nos 2 temas (só ajusta contraste). */
	--lt-ok-fg:     #5FD79A; --lt-ok-bg:     rgba(47,184,119,.13); --lt-ok-deep:     #157A4E; /* Dominada / sucesso   */
	--lt-warn-fg:   #E3A93F; --lt-warn-bg:   rgba(227,169,63,.13); --lt-warn-deep:   #B4761A; /* 1ª Revisão / hoje    */
	--lt-orange-fg: #E58C4C; --lt-orange-bg: rgba(229,140,76,.13); --lt-orange-deep: #C2632A; /* 2ª Revisão / erro    */
	--lt-danger-fg: #E27B5D; --lt-danger-bg: rgba(226,123,93,.13); --lt-danger-deep: #B0492E; /* Nível Hard / atrasada*/
	--lt-purple-fg: #A8A4F2; --lt-purple-bg: rgba(140,136,230,.15); --lt-purple-deep:#4F4BA6; /* Hard Dominada / concl.*/
	--lt-blue-fg:   #6F9CF5; --lt-blue-bg:   rgba(111,156,245,.10); --lt-blue-line:   rgba(111,156,245,.30); /* dados/azul */

	/* Apoio */
	--lt-accent:       #F2B84B;              /* âmbar (avisos/destaques)     */
}

:root[data-tema="claro"] {
	color-scheme: light;

	/* ===== TEMA CLARO ===== */

	/* Fundos e superfícies */
	--lt-bg:           #FFFFFF;
	--lt-bg-elev:      #FAFAF8;
	--lt-bg-card:      #F5F6F4;
	--lt-bg-card-2:    #EDEFEA;
	--lt-surface:      rgba(10,9,8,.05);

	/* Bordas */
	--lt-border:       rgba(10,9,8,.12);
	--lt-border-soft:  rgba(10,9,8,.08);
	--lt-line:         #E4E6E1;

	/* Texto */
	--lt-text-strong:  #0A0908;
	--lt-text:         #1F2430;
	--lt-text-soft:    #374151;
	--lt-hook:         #1F2937;
	--lt-text-muted:   #566072;
	--lt-text-faint:   #8A93A3;

	/* Marca (verde) — tons um pouco mais escuros p/ contraste no branco */
	--lt-brand:        #16A34A;
	--lt-brand-strong: #0E9247;
	--lt-brand-soft:   #22C55E;
	--lt-brand-weak:   rgba(22,163,74,.10);
	--lt-brand-line:   rgba(22,163,74,.30);
	--lt-brand-deep:   #157A4E;
	--lt-brand-panel:  linear-gradient(160deg,#EAF7EF 0%,#DCF0E4 100%);
	--lt-on-brand:     #FFFFFF;

	/* Status / etiquetas — mesma cor, escurecida p/ contraste no branco. */
	--lt-ok-fg:     #15803D; --lt-ok-bg:     rgba(22,163,74,.10);  --lt-ok-deep:     #157A4E;
	--lt-warn-fg:   #B45309; --lt-warn-bg:   rgba(217,119,6,.12);  --lt-warn-deep:   #B45309;
	--lt-orange-fg: #C2410C; --lt-orange-bg: rgba(234,88,12,.10);  --lt-orange-deep: #C2410C;
	--lt-danger-fg: #DC2626; --lt-danger-bg: rgba(220,38,38,.10);  --lt-danger-deep: #B91C1C;
	--lt-purple-fg: #6D28D9; --lt-purple-bg: rgba(109,40,217,.10); --lt-purple-deep: #5B21B6;
	--lt-blue-fg:   #2563EB; --lt-blue-bg:   rgba(37,99,235,.08);  --lt-blue-line:   rgba(37,99,235,.25);

	/* Apoio */
	--lt-accent:       #C2760A;
}

/* ============================================================
 * Botão de alternância de tema
 * Estilo base para qualquer elemento [data-lt-tema-toggle] (ex.: o
 * widget HTML colado no cabeçalho). O tema/Elementor pode sobrescrever.
 * ============================================================ */
[data-lt-tema-toggle] {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	padding: 0;
	background: var(--lt-surface);
	border: 1px solid var(--lt-border);
	border-radius: 10px;
	line-height: 1;
	font-size: 17px;
	color: var(--lt-text-strong);
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
[data-lt-tema-toggle]:hover { border-color: var(--lt-brand); }
[data-lt-tema-toggle]:focus-visible { outline: 2px solid var(--lt-brand); outline-offset: 2px; }

/* ============================================================
 * MOLDURA DO SITE (fora dos shortcodes) — tema/Elementor
 * ------------------------------------------------------------
 * O cabeçalho, o rodapé e o fundo do body pertencem ao TEMA /
 * Elementor, não aos shortcodes. Aqui fazemos essa "moldura"
 * acompanhar o tema claro/escuro usando os mesmos tokens.
 *
 * 1) FUNDO DA PÁGINA: automático (regra `html body` abaixo).
 * 2) CABEÇALHO / RODAPÉ / outras seções do tema: adicione a
 *    classe CSS  lt-tema-chrome  na seção pelo Elementor
 *    (editar a seção ▸ Avançado ▸ Classes CSS). Aí o fundo, os
 *    textos, os links do menu e os ícones daquela seção passam
 *    a seguir o tema. Use  lt-tema-chrome  só onde quiser temar.
 *
 * OBS.: a marca (verde) e o logo NÃO são forçados — se o logo
 * for imagem, ele não muda de cor (é esperado). Ajustes finos
 * de elementos específicos podem ser feitos caso a caso.
 * ============================================================ */

/* 1) Fundo da página — a área escura em volta do conteúdo. */
html body { background-color: var(--lt-bg); }

/* 2) Seções do tema marcadas com .lt-tema-chrome (ex.: cabeçalho).
 *    SEM !important: o prefixo `html body` dá especificidade
 *    suficiente para vencer os PADRÕES do Elementor. Para isso
 *    funcionar, LIMPE no Elementor as cores desses elementos
 *    (fundo da seção, cor do menu normal/hover/ativo, dropdown e
 *    ícones). Assim os tokens abaixo viram a única fonte — e o
 *    Elementor volta a poder sobrescrever ponto a ponto se preciso. */
html body .lt-tema-chrome,
html body .lt-tema-chrome > .elementor-container,
html body .lt-tema-chrome > .e-con-inner,
html body .lt-tema-chrome > .elementor-background-overlay { background-color: var(--lt-bg); }

/* Divisor inferior sutil (linha do cabeçalho). */
html body .lt-tema-chrome { border-color: var(--lt-line); }

/* Textos, itens de menu e ícones acompanham o tema (o verde da
 * marca permanece, pois é definido nos próprios elementos). */
html body .lt-tema-chrome .elementor-item,
html body .lt-tema-chrome .elementor-heading-title,
html body .lt-tema-chrome nav a,
html body .lt-tema-chrome .menu-item > a,
html body .lt-tema-chrome i { color: var(--lt-text-strong); }

/* Seta do menu suspenso (.sub-arrow) no estado NORMAL. Precisa
 * de seletor específico para vencer o padrão do Elementor, que
 * é mais específico que o `i` acima. Hover/ativo já herdam via
 * currentColor das regras de link. */
html body .lt-tema-chrome .elementor-nav-menu .elementor-item .sub-arrow,
html body .lt-tema-chrome .elementor-nav-menu .elementor-item .sub-arrow i,
html body .lt-tema-chrome .sub-arrow,
html body .lt-tema-chrome .sub-arrow i { color: var(--lt-text-strong); }

/* Menu suspenso (dropdown) — painel flutuante do submenu.
 * Cobre o Nav Menu do Elementor e o menu nativo do WordPress.
 * Usa superfície elevada (fica melhor que preto puro). */
html body .lt-tema-chrome .elementor-sub-menu,
html body .lt-tema-chrome .sub-menu,
html body .lt-tema-chrome ul ul {
	background-color: var(--lt-bg-card);
	border-color: var(--lt-border);
}
html body .lt-tema-chrome .elementor-sub-menu a,
html body .lt-tema-chrome .elementor-sub-item,
html body .lt-tema-chrome .sub-menu a,
html body .lt-tema-chrome ul ul a {
	color: var(--lt-text-strong);
	background-color: transparent;
}
html body .lt-tema-chrome .elementor-sub-menu a:hover,
html body .lt-tema-chrome .elementor-sub-item:hover,
html body .lt-tema-chrome .sub-menu a:hover,
html body .lt-tema-chrome ul ul a:hover {
	color: var(--lt-brand);
	background-color: var(--lt-surface);
}

/* ============================================================
 * CLASSES UTILITÁRIAS DE TEMA
 * ------------------------------------------------------------
 * Aplique uma destas classes em um widget de TEXTO pelo Elementor
 * (Avançado ▸ Classes CSS) para o texto seguir o tema. Sem
 * !important: deixe a cor daquele texto EM BRANCO no Elementor
 * para a classe assumir.
 *
 *   TEXTO:   lt-texto · lt-texto-forte · lt-texto-suave · lt-texto-fraco · lt-verde
 *   FUNDO:   lt-fundo (página) · lt-superficie (cartão)
 * ============================================================ */
html body .lt-texto,
html body .lt-texto .elementor-heading-title,
html body .lt-texto p { color: var(--lt-text); }

html body .lt-texto-forte,
html body .lt-texto-forte .elementor-heading-title,
html body .lt-texto-forte p { color: var(--lt-text-strong); }

html body .lt-texto-suave,
html body .lt-texto-suave .elementor-heading-title,
html body .lt-texto-suave p { color: var(--lt-text-muted); }

html body .lt-texto-fraco,
html body .lt-texto-fraco .elementor-heading-title,
html body .lt-texto-fraco p { color: var(--lt-text-faint); }

html body .lt-verde,
html body .lt-verde .elementor-heading-title,
html body .lt-verde p { color: var(--lt-brand); }

html body .lt-fundo { background-color: var(--lt-bg); }
html body .lt-superficie { background-color: var(--lt-bg-card); }