/*
Theme Name: Camila Horr
Theme URI: https://camilahorr.com.br
Author: ProdCrew
Description: Tema exclusivo para o site da Dra. Camila Horr, cirurgiã plástica em Porto Alegre.
Version: 1.0.0
Requires at least: 6.4
Requires PHP: 8.0
Text Domain: camila-horr
*/

:root {
	/* Cores base */
	--creme: #FAF7F0;
	--dark: #1A1714;
	--gold: #B8934A;
	--sage: #6D8275;
	--gray-light: #E8E2DB;
	--section-bg-alt: #EEECEA;
	--section-bg-light: #F7F7F7;
	--gray-mid: #C4B8AC;
	--white: #FFFFFF;
	--text: #524E48;
	--text-light: #6B6B6B;

	/* --gold e --sage só têm contraste AA (WCAG) como texto sobre fundo ESCURO
	   (--dark). Sobre fundo claro (--creme/--white) usar sempre as variantes
	   abaixo, mais escuras, para texto continuar legível. */
	--gold-on-light: #8C6A2E;
	--sage-on-light: #4C5C52;

	/* Fontes */
	--font-body: 'Poppins', sans-serif;
	--font-display: 'DM Serif Display', serif;

	/* Escala tipográfica — reutilizar em todas as seções/páginas novas
	   em vez de criar tamanhos ad hoc. */
	--fs-display: clamp(2.5rem, 8vw, 4.5rem);
	--fs-h1: clamp(2rem, 5vw, 3rem);
	--fs-h2: clamp(1.5rem, 3.5vw, 2.25rem);
	--fs-h3: 1.25rem;
	--fs-body: 1rem;
	--fs-body-sm: 0.9rem;
	--fs-caption: 0.8rem;

	/* Site é full-bleed (seções ocupam 100% da largura), mas o conteúdo
	   dentro delas fica sempre centralizado com essa largura máxima. */
	--container-max: 1528px;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--creme);
	color: var(--text);
	font-family: var(--font-body);
	font-size: var(--fs-body);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

img,
svg {
	max-width: 100%;
	display: block;
}

a {
	color: inherit;
	text-decoration: none;
}

ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

h1, h2, h3, h4, p {
	margin: 0;
}

button {
	font-family: inherit;
}

.container {
	width: 100%;
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: 20px;
}

@media (min-width: 1120px) {
	.container {
		padding-inline: 48px;
	}
}

@media (min-width: 1600px) {
	.container {
		padding-inline: 64px;
	}
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
}