/* ==========================================================================
   Base — tipografia editorial, container, primitivos e acessibilidade.
   Regras duras do design system: sem negrito, sem caixa, sem sombra, sem raio,
   sem cor de acento. Separação por fio capilar e por espaço.
   ========================================================================== */
body {
	font-family: var(--cad-font-text);
	font-size: var(--cad-fs-body);
	line-height: var(--cad-lh-body);
	letter-spacing: var(--cad-ls-body);
	color: var(--cad-graphite);
	background: var(--cad-paper);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 {
	font-family: var(--cad-font-display);
	font-weight: 400;
	color: var(--cad-ink);
	line-height: var(--cad-lh-title);
	letter-spacing: var(--cad-ls-display);
}

strong, b { font-weight: 400; }
em, i { font-style: italic; }

p { margin: 0 0 var(--cad-sp-4); max-width: var(--cad-maxw-body); }
p:last-child { margin-bottom: 0; }

a {
	color: var(--cad-ink);
	text-decoration: none;
	border-bottom: var(--cad-hairline) solid var(--cad-rule);
	transition: border-color var(--cad-motion-fast) var(--cad-ease);
}
a:hover { color: var(--cad-ink); border-bottom-color: var(--cad-ink); }

::selection { background: var(--cad-numeral-ghost); color: var(--cad-ink); }

/* Container central ------------------------------------------------------ */
.raz-container {
	width: 100%;
	max-width: var(--raz-container);
	margin-inline: auto;
	padding-inline: var(--raz-container-pad);
}

.raz-content { display: block; }

/* Primitivos editoriais -------------------------------------------------- */
.cad-label {
	display: block;
	font-family: var(--cad-font-label);
	font-size: var(--cad-fs-label);
	line-height: 1;
	letter-spacing: var(--cad-ls-label);
	text-transform: uppercase;
	color: var(--cad-gray-mid);
	margin-bottom: var(--cad-label-gap);
}

.cad-rule {
	width: 68px;
	height: 0;
	border: 0;
	border-top: var(--cad-hairline-strong) solid var(--cad-ink);
	margin: var(--cad-rule-clear) 0 var(--cad-sp-5);
}

.cad-hairline {
	width: 100%;
	height: 0;
	border: 0;
	border-top: var(--cad-hairline) solid var(--cad-rule);
	margin: 0;
}

.cad-title {
	font-size: var(--cad-fs-display-2);
	line-height: var(--cad-lh-display);
	margin: 0;
}

.cad-lead {
	font-family: var(--cad-font-display);
	font-size: var(--cad-fs-lead);
	line-height: var(--cad-lh-lead);
	letter-spacing: var(--cad-ls-lead);
	color: var(--cad-ink);
	max-width: var(--cad-maxw-lead);
}

.cad-quote {
	font-family: var(--cad-font-display);
	font-style: italic;
	font-size: var(--cad-fs-quote);
	line-height: 1.3;
	color: var(--cad-ink);
	max-width: 46ch;
	margin: 0;
}

.cad-numeral {
	font-family: var(--cad-font-display);
	font-size: var(--cad-fs-display-2);
	line-height: 1;
	color: var(--cad-numeral-ghost);
}

/* Seção: ritmo vertical padrão ------------------------------------------ */
.cad-section { padding-block: var(--cad-section-y); }
.cad-section + .cad-section { border-top: var(--cad-hairline) solid var(--cad-rule); }
.cad-section--dark {
	background: var(--cad-ink-deep);
	color: var(--cad-on-cover-quiet);
	border-top-color: var(--cad-rule-cover);
}
.cad-section--dark h1,
.cad-section--dark h2,
.cad-section--dark h3,
.cad-section--dark .cad-lead,
.cad-section--dark .cad-quote { color: var(--cad-on-cover); }
.cad-section--dark .cad-label { color: var(--cad-on-cover-quiet); }
.cad-section--dark .cad-rule { border-top-color: var(--cad-on-cover); }
.cad-section--dark .cad-hairline { border-top-color: var(--cad-rule-cover); }
.cad-section--dark a { color: var(--cad-on-cover); border-bottom-color: var(--cad-rule-cover); }
.cad-section--dark a:hover { border-bottom-color: var(--cad-on-cover); }

/* Grade editorial: coluna larga + coluna de apoio ------------------------ */
.cad-two {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--cad-sp-6);
}
@media (min-width: 900px) {
	.cad-two {
		grid-template-columns: 1.72fr 1fr;
		gap: var(--cad-gutter);
	}
	.cad-two__aside {
		border-left: var(--cad-hairline) solid var(--cad-rule);
		padding-left: var(--cad-gutter);
	}
	.cad-section--dark .cad-two__aside { border-left-color: var(--cad-rule-cover); }
}

/* Botão silencioso: fio, sem preenchimento, sem raio --------------------- */
.cad-button {
	display: inline-block;
	font-family: var(--cad-font-label);
	font-size: var(--cad-fs-label);
	letter-spacing: var(--cad-ls-label);
	text-transform: uppercase;
	color: var(--cad-ink);
	background: transparent;
	border: var(--cad-hairline-strong) solid var(--cad-ink);
	border-radius: var(--cad-radius);
	padding: 14px 26px;
	cursor: pointer;
	transition: background-color var(--cad-motion-fast) var(--cad-ease),
		color var(--cad-motion-fast) var(--cad-ease);
}
.cad-button:hover { background: var(--cad-ink); color: var(--cad-paper); }

/* Foco visível ----------------------------------------------------------- */
:where(a, button, input, textarea, select, [tabindex]):focus-visible {
	outline: var(--cad-hairline-strong) solid var(--cad-ink);
	outline-offset: 3px;
}

/* Acessibilidade --------------------------------------------------------- */
.screen-reader-text {
	border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%);
	height: 1px; width: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute !important; word-wrap: normal !important;
}
.raz-skip-link {
	position: absolute; left: -999px; top: 0; z-index: 2000;
	background: var(--cad-paper); color: var(--cad-ink); padding: var(--cad-sp-3) var(--cad-sp-4);
}
.raz-skip-link:focus { left: 0; }

body.raz-no-scroll { overflow: hidden; }

/* Trilha de migalhas ----------------------------------------------------- */
.raz-breadcrumb ol {
	display: flex; flex-wrap: wrap; align-items: center; gap: var(--cad-sp-2);
	font-family: var(--cad-font-label);
	font-size: var(--cad-fs-label);
	letter-spacing: var(--cad-ls-label);
	text-transform: uppercase;
	color: var(--cad-gray-mid);
	list-style: none; margin: 0; padding: 0;
}
.raz-breadcrumb a { color: var(--cad-gray-mid); border-bottom: 0; }
.raz-breadcrumb a:hover { color: var(--cad-ink); }
.raz-breadcrumb [aria-current="page"] { color: var(--cad-ink); }

@media (prefers-reduced-motion: reduce) {
	* { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}
