/* Videlis — design tokens */
:root {
	/* Verde Musgo */
	--color-green: #5B5F47;
	--color-green-700: #4C4F3C;
	--color-green-a14: rgba(91, 95, 71, 0.14);
	/* Terracota */
	--color-terracota: #A34F1F;
	--color-terracota-700: #8F431A;
	/* Cinza Azulado */
	--color-blue: #3F4750;
	--color-blue-500: #4E5D6C;
	/* Bege */
	--color-cream: #FDF9ED;
	--color-sand-50: #F7F1E4;
	--color-sand-100: #EDE9DA;
	--color-sand: #E4DDC8;
	--color-sand-line: #DCD5BF;
	--color-sand-400: #BDA67A;
	--color-khaki: #D0C3A1;
	--color-khaki-82: rgba(208, 195, 161, 0.82);
	--color-khaki-28: rgba(208, 195, 161, 0.28);
	/* Terracota claro: categoria sobre fundo escuro (topo do post) */
	--color-terracota-light: #F0C9A8;
	/* Degradê escuro sobre foto (topo do post) */
	--scrim-post: linear-gradient(180deg, rgba(30, 28, 22, .76) 0%, rgba(30, 28, 22, .8) 60%, rgba(30, 28, 22, .88) 100%);

	/* Papéis */
	--text-heading: var(--color-blue);
	--text-body: var(--color-blue-500);
	--text-small: var(--color-blue);

	/* Fontes */
	--font-title: "Crimson Pro", Georgia, serif;
	--font-body: "DM Sans", system-ui, sans-serif;

	/* Escala tipográfica — desktop */
	--fs-h1: 56px;
	--fs-h2: 42px;
	--fs-h3: 24px;
	--fs-h4: 20px;
	--fs-body: 16px;
	--fs-name: 18px;
	--fs-small: 14px;
	--fs-btn: 14px;
	--fs-meta: 14px;
	--fs-label: 12px;
	--fs-nav: 13px;

	/* Espaçamento */
	--space-4: 4px;
	--space-8: 8px;
	--space-12: 12px;
	--space-16: 16px;
	--space-24: 24px;
	--space-32: 32px;
	--space-40: 40px;
	--section-y: 80px;
	--gutter: 20px;

	/* Raios */
	--radius-sm: 4px;
	--radius-md: 8px;
	--radius-lg: 12px;

	/* Larguras */
	--container: 1120px; /* largura máxima do conteúdo (laptop e acima) */
	--text-narrow: 768px; /* largura de introdução */
	--measure-read: 68ch; /* largura de leitura (60–70 caracteres por linha) */
	--header-h: 64px;
}

@media (max-width: 1024px) {
	:root {
		--fs-h1: 48px;
		--fs-h2: 36px;
	}
}

@media (max-width: 767px) {
	:root {
		--fs-h1: 40px;
		--fs-h2: 32px;
		--fs-h3: 22px;
		--fs-body: 16px;
		--fs-btn: 14px;
		--section-y: 56px;
		--header-h: 60px;
	}
}