/*
 * Cridare News — Design System base.
 *
 * Define tokens e uma base editorial mínima. Componentes, grids, templates e
 * a Home permanecem fora do escopo desta etapa.
 *
 * @package Cridare_News
 */

:root {
	/* Identidade de cada portal: substituível via inc/branding.php. */
	--cn-brand-primary: #1F3A5F;
	--cn-brand-secondary: #2E7D32;
	--cn-brand-on-primary: #FFFFFF;
	--cn-brand-on-secondary: #FFFFFF;

	/* Neutros estruturais: não representam uma cor de marca. */
	--cn-neutral-50: #F8FAFC;
	--cn-neutral-100: #F1F5F9;
	--cn-neutral-200: #E2E8F0;
	--cn-neutral-300: #CBD5E1;
	--cn-neutral-500: #64748B;
	--cn-neutral-700: #334155;
	--cn-neutral-900: #0F172A;
	--cn-surface: var(--cn-brand-on-primary);
	--cn-surface-muted: var(--cn-neutral-50);
	--cn-surface-subtle: var(--cn-neutral-100);
	--cn-text: var(--cn-neutral-900);
	--cn-text-muted: var(--cn-neutral-500);
	--cn-border: var(--cn-neutral-200);
	--cn-border-strong: var(--cn-neutral-300);

	/* Tipografia: fontes locais poderão ser ativadas sem alterar componentes. */
	--cn-font-ui: "Manrope", Arial, sans-serif;
	--cn-font-editorial: "Source Serif 4", Georgia, serif;

	/* Escala estrutural para uso futuro em componentes e templates. */
	--cn-space-1: 0.25rem;
	--cn-space-2: 0.5rem;
	--cn-space-3: 0.75rem;
	--cn-space-4: 1rem;
	--cn-space-5: 1.5rem;
	--cn-space-6: 2rem;
	--cn-space-7: 3rem;
	--cn-space-8: 4rem;

	/* Geometria contida, adequada a uma publicação editorial. */
	--cn-radius-sm: 2px;
	--cn-radius-md: 4px;
	--cn-radius-lg: 8px;
	--cn-radius-pill: 9999px;
	--cn-shadow-subtle: 0 1px 2px rgb(15 23 42 / 6%);
	--cn-shadow-none: none;
	--cn-surface-overlay: rgb(15 23 42 / 72%);
	--cn-surface-backdrop: rgb(15 23 42 / 45%);
	--cn-border-on-brand: rgb(255 255 255 / 65%);
	--cn-content-width: 760px;
	--cn-wide-width: 1200px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--cn-surface);
	color: var(--cn-text);
	font-family: var(--cn-font-ui);
	font-size: 1rem;
	line-height: 1.5;
}

/* Direção tipográfica, sem impor a composição de nenhuma página. */
h1, h2, h3, h4, h5, h6,
button, input, select, textarea { font-family: var(--cn-font-ui); }

.cn-editorial,
.cn-editorial-content { font-family: var(--cn-font-editorial); }

a { color: var(--cn-brand-primary); }
a:hover { color: var(--cn-brand-secondary); }

:focus-visible {
	outline: 3px solid var(--cn-brand-secondary);
	outline-offset: 3px;
}

img, svg, video { max-width: 100%; height: auto; }
/* Utilitário global para conteúdo disponível a leitores de tela. */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}