/* ================================================
   01-base.css
   Variáveis de design, reset global e tipografia
   ================================================ */

/* --- Google Fonts (importadas via HTML) ---
   Cormorant Garamond → títulos e serifados
   Lato              → corpo e labels
   ------------------------------------------------ */

/* --- Paleta de cores Artisanal Cuisine --- */
:root {
  --vermelho:        #B22222;   /* botões, destaques, CTAs       */
  --verde:           #556B2F;   /* labels, ícones, detalhes      */
  --creme:           #F5E6CC;   /* fundo principal, áreas texto  */
  --espresso:        #3E2723;   /* cabeçalhos, rodapé, tipografia*/
  --dourado:         #C5A46D;   /* acentos, ornamentos           */

  /* Tons derivados */
  --espresso-light:  #5a3d37;
  --espresso-dark:   #1a0c08;
  --creme-dark:      #e8d0a8;
  --vermelho-dark:   #8B1A1A;
  --dourado-soft:    rgba(197,164,109,0.15);

  /* Sombras */
  --sombra-card:     0 20px 50px rgba(62,39,35,0.22);
  --sombra-float:    0 6px 24px rgba(178,34,34,0.45);

  /* Bordas */
  --borda-dourada:   1px solid rgba(197,164,109,0.25);
  --borda-dourada-hover: 1px solid rgba(197,164,109,0.5);

  /* Tipografia */
  --font-titulo:     'Cormorant Garamond', Georgia, serif;
  --font-corpo:      'Lato', 'Helvetica Neue', sans-serif;

  /* Espaçamentos de seção */
  --section-padding: 6rem 2rem;
  --section-max-width: 1140px;

  /* Transições */
  --transition-base: 0.25s ease;
  --transition-card: 0.35s ease;
}

/* --- Reset --- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  font-size: 16px;
}

body {
  font-family: var(--font-corpo);
  background-color: var(--creme);
  color: var(--espresso);
  overflow-x: hidden;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

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

button {
  font-family: var(--font-corpo);
  cursor: pointer;
}

ul { list-style: none; }

/* --- Tipografia global --- */
h1, h2, h3, h4 {
  font-family: var(--font-titulo);
  line-height: 1.2;
}

/* --- Utilitários de seção --- */
.section-inner {
  max-width: var(--section-max-width);
  margin: 0 auto;
}

.section-label {
  display: block;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--verde);
  margin-bottom: 0.6rem;
  font-family: var(--font-corpo);
}

.section-title {
  font-family: var(--font-titulo);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700;
  color: var(--espresso);
  margin-bottom: 1rem;
}

.section-title em {
  color: var(--vermelho);
  font-style: italic;
}

/* --- Ornamento divisor --- */
.divider-ornament {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 0 auto 1.5rem;
  width: fit-content;
}

.divider-ornament::before,
.divider-ornament::after {
  content: '';
  width: 60px;
  height: 1px;
  background: var(--dourado);
  opacity: 0.55;
}

.divider-ornament i {
  color: var(--dourado);
  font-size: 0.9rem;
}

/* --- Animação reveal no scroll --- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.7s ease, transform 0.7s ease;
}

.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}