/*
 * Tokens do Design System CatolicoApp — portados literalmente do artifact
 * (mesmos valores hex/rem). Fonte da verdade: se um valor não está aqui,
 * não entra no tema — novos tokens nascem aqui primeiro.
 */

:root {
	/* Marca — escala Terra, derivada de #A57F60 */
	--terra-50: #FAF6F2;
	--terra-100: #F3EAE1;
	--terra-200: #E5D3C3;
	--terra-300: #D4B79F;
	--terra-400: #BC9A7B;
	--terra-500: #A57F60;
	--terra-600: #8A6749;
	--terra-700: #6E5138;
	--terra-800: #533D2B;
	--terra-900: #3A2B1F;

	/* Neutros quentes */
	--neutro-0: #FFFFFF;
	--neutro-50: #FBF9F7;
	--neutro-100: #F4F1ED;
	--neutro-200: #E7E2DB;
	--neutro-300: #D3CCC2;
	--neutro-400: #A89F93;
	--neutro-500: #6E655A; /* escurecido p/ WCAG AA (--texto-suave falhava 4,5:1 no tema claro) */
	--neutro-600: #5C554C;
	--neutro-700: #453F38;
	--neutro-800: #2E2A25;
	--neutro-900: #1E1B17;

	/*
	 * Cores litúrgicas — tokens semânticos dedicados. NUNCA reaproveitar
	 * como cor de UI genérica; só o partial badge-lit.php (e a Liturgia
	 * Diária / fichas de festas) tem autorização para consumi-las.
	 */
	--lit-tempo-comum: #3E7C52;       /* verde */
	--lit-advento-quaresma: #6C4E8E;  /* roxo */
	--lit-martires: #A63A3A;          /* vermelho */
	--lit-festa-maior: #B8912F;       /* dourado — representa o branco litúrgico na interface */
	--lit-gaudete-laetare: #C77D90;   /* rosa */

	/* Semânticas de interface */
	--ui-sucesso: #2F7D4F;
	--ui-aviso: #A87B1E;
	--ui-erro: #B23A2E;

	/* Papéis (o tema consome estes, nunca os tokens brutos diretamente) */
	--bg: var(--neutro-50);
	--superficie: var(--neutro-0);
	--superficie-2: var(--terra-50);
	--borda: var(--neutro-200);
	--borda-forte: var(--neutro-300);
	--texto: var(--neutro-800);
	--texto-2: var(--neutro-600);
	--texto-suave: var(--neutro-500);
	--acento: var(--terra-500);
	--acento-texto: var(--terra-600);
	--acento-forte: var(--terra-700);
	--link: var(--terra-600);
	/*
	 * --acento-sobre: tinta legível sobre uma superfície de acento cheia
	 * (botão primário, letra ativa do índice A-Z, tag em hover). Token
	 * semântico distinto de --acento-forte, mesmo com valor coincidente —
	 * um descreve "acento mais escuro", o outro "o que pintar em cima do
	 * acento" — não colapsar em um só.
	 */
	--acento-sobre: #6E5138;
	/*
	 * --acento-preenchido: fundo sólido de acento com texto branco por cima
	 * (contador de Ave-Marias, botão "Ver Ranking" do Termo Católico).
	 * Deliberadamente fixo nos dois temas — no tema escuro --acento já é um
	 * tom claro pensado pra ser texto sobre fundo escuro, não uma superfície
	 * pra receber texto branco (falharia contraste); como essas peças têm
	 * fundo e texto próprios, não precisam seguir o tema da página.
	 */
	--acento-preenchido: #6E5138;
	--sombra: 0 1px 2px rgba(58, 43, 31, .06), 0 4px 16px rgba(58, 43, 31, .07);

	/* Tipografia */
	--f-display: "EB Garamond", Georgia, "Times New Roman", serif;
	--f-leitura: "Source Serif 4", Georgia, serif;
	--f-ui: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
	--f-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
	--fs-ui: 1rem;

	/* Escala tipográfica */
	--fs-legenda: 0.8125rem;
	--fs-leitura: 1.1875rem;
	--fs-oracao: 1.3125rem;
	--fs-h3: 1.375rem;
	--fs-h2: 1.875rem;
	--fs-h1: 2.5rem;
	--fs-display: clamp(2.5rem, 6vw, 3.5rem);

	/* Espaçamento — base 4px */
	--esp-1: 4px;
	--esp-2: 8px;
	--esp-3: 12px;
	--esp-4: 16px;   /* gutter mínimo no celular */
	--esp-5: 20px;
	--esp-6: 24px;   /* padding interno de card */
	--esp-8: 32px;
	--esp-12: 48px;  /* entre blocos de seção */
	--esp-16: 64px;
	--esp-24: 96px;  /* respiro entre seções da home */

	/* Larguras e raios */
	--content-size: 680px;
	--wide-size: 1080px;
	--raio-s: 4px;
	--raio-m: 10px;
	--raio-pill: 999px;

	/* Breakpoints (documentativo — usar como media query literal, CSS não lê var() em @media) */
	--bp-sm: 600px;
	--bp-md: 860px;
	--bp-lg: 1080px;

	color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #211D18;
		--superficie: #2A251F;
		--superficie-2: #332C24;
		--borda: #453E35;
		--borda-forte: #57503F;
		--texto: #EDE7DE;
		--texto-2: #BFB5A7;
		--texto-suave: #948B7D;
		--acento: #C4A183;
		--acento-texto: #D4B79F;
		--acento-forte: #E5D3C3;
		--acento-sobre: #E5D3C3;
		--link: #D4B79F;
		--sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3);
		--lit-tempo-comum: #6FAE83;
		--lit-advento-quaresma: #A288C4;
		--lit-martires: #D07A72;
		--lit-festa-maior: #D4B054;
		--lit-gaudete-laetare: #DA9EAE;
		--ui-sucesso: #6FAE83;
		--ui-aviso: #D4A94E;
		--ui-erro: #DB8074;
	}
}

:root[data-theme="dark"] {
	--bg: #211D18;
	--superficie: #2A251F;
	--superficie-2: #332C24;
	--borda: #453E35;
	--borda-forte: #57503F;
	--texto: #EDE7DE;
	--texto-2: #BFB5A7;
	--texto-suave: #948B7D;
	--acento: #C4A183;
	--acento-texto: #D4B79F;
	--acento-forte: #E5D3C3;
	--acento-sobre: #E5D3C3;
	--link: #D4B79F;
	--sombra: 0 1px 2px rgba(0, 0, 0, .35), 0 4px 16px rgba(0, 0, 0, .3);
	--lit-tempo-comum: #6FAE83;
	--lit-advento-quaresma: #A288C4;
	--lit-martires: #D07A72;
	--lit-festa-maior: #D4B054;
	--lit-gaudete-laetare: #DA9EAE;
	--ui-sucesso: #6FAE83;
	--ui-aviso: #D4A94E;
	--ui-erro: #DB8074;
}