/* ==========================================================================
   CatVerse — design tokens
   Fonte única de cores, tipografia e espaçamentos. O Elementor lê os mesmos
   valores nos Global Styles, para não existirem duas paletas a divergir.

   A base é CLARA. As zonas escuras (hero, player, rodapé) são a exceção e
   pedem-se com a classe .cv-escuro, que troca os tokens no seu subárvore —
   assim um componente nunca precisa de saber onde está para ficar legível.
   ========================================================================== */

:root {
	/* --- Base clara --- */
	--cv-fundo: #F4F7FB;
	--cv-superficie: #FFFFFF;
	--cv-superficie-2: #E9EFF7;
	--cv-afundado: #DFE7F2;

	/* --- Azul-marinho, agora reservado às zonas escuras --- */
	--cv-marinho-900: #0A111E;
	--cv-marinho-800: #101A2B;
	--cv-marinho-700: #16243A;
	--cv-marinho-600: #1E3050;

	/* --- Texto sobre fundo claro --- */
	--cv-texto: #16233A;
	--cv-texto-medio: #4A5C78;
	--cv-texto-fraco: #6B7C97;
	--cv-texto-invertido: #FFFFFF;

	/* --- Linhas --- */
	--cv-linha: #CBD7E6;
	--cv-linha-suave: #DFE7F2;

	/* --- Acentos: turquesa e dourado.
	       Dois tons de cada — o escuro passa contraste AA sobre claro,
	       o vivo é para fundo escuro. Nunca trocar os papéis. --- */
	--cv-turquesa: #0C8A83;
	--cv-turquesa-vivo: #2ED3C6;
	--cv-turquesa-fraco: #D7F0EE;

	--cv-dourado: #8A6112;
	--cv-dourado-vivo: #E4B24E;
	--cv-dourado-fraco: #F7EBD1;

	/* --- Semântica, separada dos acentos da marca --- */
	--cv-ao-vivo: #D93A2B;
	--cv-ok: #1E8F6A;
	--cv-atencao: #8A6112;

	/* --- Personagens --- */
	--cv-tuga: #B07C12;
	--cv-luar: #0E7FA8;
	--cv-domino: #55678A;
	--cv-sombra: #5F4FBF;

	/* --- Tipografia --- */
	--cv-fonte-titulo: "Fraunces", Georgia, "Times New Roman", serif;
	--cv-fonte-corpo: "Instrument Sans", -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--cv-fonte-dados: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

	--cv-t-xs: 0.8125rem;
	--cv-t-s: 0.9375rem;
	--cv-t-m: 1rem;
	--cv-t-l: 1.25rem;
	--cv-t-xl: clamp(1.5rem, 3vw, 2rem);
	--cv-t-2xl: clamp(2rem, 5vw, 3.25rem);
	--cv-t-3xl: clamp(2.5rem, 7vw, 4.5rem);

	/* --- Espaçamentos (escala de 4) --- */
	--cv-e-1: 0.25rem;
	--cv-e-2: 0.5rem;
	--cv-e-3: 0.75rem;
	--cv-e-4: 1rem;
	--cv-e-6: 1.5rem;
	--cv-e-8: 2rem;
	--cv-e-12: 3rem;
	--cv-e-16: 4rem;
	--cv-e-24: 6rem;

	/* --- Formas --- */
	--cv-raio: 14px;
	--cv-raio-p: 8px;
	--cv-largura: 1180px;
	--cv-medida: 68ch;
	--cv-elevacao: 0 1px 2px rgba(22, 35, 58, .06), 0 8px 24px rgba(22, 35, 58, .07);
	--cv-elevacao-alta: 0 2px 4px rgba(22, 35, 58, .08), 0 16px 40px rgba(22, 35, 58, .12);

	--cv-transicao: 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* --------------------------------------------------------------------------
   Zonas escuras. Trocam os tokens, não as regras — qualquer componente
   colocado aqui dentro fica legível sem uma única exceção escrita à mão.
   -------------------------------------------------------------------------- */

.cv-escuro {
	--cv-fundo: #0A111E;
	--cv-superficie: #101A2B;
	--cv-superficie-2: #16243A;
	--cv-afundado: #080E18;

	--cv-texto: #EAF1FB;
	--cv-texto-medio: #A9B8CE;
	--cv-texto-fraco: #7F91AB;
	--cv-texto-invertido: #0A111E;

	--cv-linha: #26344E;
	--cv-linha-suave: #1C2942;

	--cv-turquesa: #2ED3C6;
	--cv-turquesa-fraco: #0E3A3A;
	--cv-dourado: #E4B24E;
	--cv-dourado-fraco: #382C11;

	--cv-ao-vivo: #EF5B4C;
	--cv-ok: #3FBF8F;

	--cv-tuga: #E0A93B;
	--cv-luar: #63CDF2;
	--cv-domino: #B5C3DC;
	--cv-sombra: #9E8DF0;

	--cv-elevacao: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 30px rgba(0, 0, 0, .35);
	--cv-elevacao-alta: 0 2px 6px rgba(0, 0, 0, .4), 0 20px 50px rgba(0, 0, 0, .5);

	background: var(--cv-fundo);
	color: var(--cv-texto);
}

@media (prefers-reduced-motion: reduce) {
	:root { --cv-transicao: 0ms; }

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}