/* ============================================================================
   Folha de Outono — Bordado Livre · Folha de estilos (design tokens + base)
   Reconstruída a partir do design original e do briefing da marca.
   Paleta: terracota #A85C3B · mostarda #C99A3E · oliva #768A4E · creme #F5EFE6
   Fontes: Playfair Display (títulos) + Lato (texto), via Google Fonts.
   ========================================================================== */

:root {
  /* ── Cores da marca ─────────────────────────────────────────────── */
  --bg-page:        #FDFBF7;   /* fundo geral, creme muito claro            */
  --bg-linen:       #F5EFE6;   /* seções alternadas (linho/algodão cru)     */
  --surface-card:   #FDFAF6;   /* cartões                                   */
  --surface-sunken: #F1E8DA;   /* campos rebaixados / hover                 */

  --clay-500:  #A85C3B;        /* terracota primária (header, botões)       */
  --clay-700:  #7A4226;        /* marrom escuro (títulos, hover)            */
  --clay-900:  #2C1A0E;        /* marrom quase preto (títulos fortes)       */
  --terracotta:#BE6C44;        /* acento terracota (ícones, folhas)         */
  --sage-400:  #768A4E;        /* verde oliva (acentos)                     */
  --mustard:   #C99A3E;        /* mostarda/dourado outono                   */

  --linen-200: #F3EBDD;        /* linho claro                               */
  --linen-400: #E2D5C0;        /* borda linho                               */

  --header-bg: #A85C3B;        /* faixa do cabeçalho (terracota)            */
  --footer-bg: #6E3B23;        /* rodapé (marrom profundo)                  */
  --notice-bg: #8E4A2D;        /* barra de avisos do topo                   */

  --text-primary:   #3A2E26;   /* texto padrão                              */
  --text-secondary: #5F4A39;   /* texto de apoio                            */
  --text-muted:     #94806C;   /* texto discreto                            */
  --text-on-clay:   #FBF1E4;   /* texto creme sobre terracota/marrom        */

  --border-soft:   #ECE1D1;
  --border-strong: #D8C9B8;

  /* ── Tipografia ─────────────────────────────────────────────────── */
  /* Famílias simples (usadas via fontFamily) */
  --font-sans:  'Lato', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  /* Presets completos (usados via shorthand `font:`) */
  --type-body: 400 1rem/1.7 var(--font-sans);
  --type-ui:   500 .9rem/1.45 var(--font-sans);

  --fs-2xs: 11px;
  --fs-xs:  12px;
  --fs-sm:  14px;
  --fs-base:16px;
  --fs-xl:  20px;
  --fs-2xl: 26px;

  --ls-wider: .12em;

  /* ── Layout / espaçamento ───────────────────────────────────────── */
  --container: 1180px;
  --header-h:  76px;

  --space-3: 12px;
  --space-4: 16px;
  --space-5: 24px;
  --space-6: 32px;
  --space-7: 48px;
  --space-8: 64px;
  --space-9: 96px;

  --radius-sm:    8px;
  --radius-md:    14px;
  --radius-round: 999px;

  --shadow-xs: 0 1px 3px rgba(90, 48, 24, .07);
  --shadow-md: 0 8px 28px rgba(90, 48, 24, .12);

  /* ── Ajustes finos (antes no painel de "Tweaks") ────────────────── */
  --hero-pad-left: 56px;
  --section-gap:   32px;
}

/* ── Reset / base ─────────────────────────────────────────────────── */
* { box-sizing: border-box; }

html, body {
  margin: 0;
  background: var(--bg-page);
  color: var(--text-primary);
  font: var(--type-body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img { max-width: 100%; }
button { font-family: inherit; }
a { color: inherit; }

/* ── Interações (hover/focus) ─────────────────────────────────────── */
.fo-btn { transition: background .18s ease, transform .18s ease, box-shadow .18s ease; }
.fo-btn:hover { transform: translateY(-1px); filter: brightness(1.05); box-shadow: var(--shadow-xs); }
.fo-btn:active { transform: translateY(0); }

.fo-card { transition: transform .2s ease, box-shadow .2s ease; }
.fo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }

.fo-nav-link:hover { color: var(--clay-700) !important; }

.fo-field:focus { border-color: var(--clay-500) !important; background: #fff !important; }

.fo-size-btn { transition: background .15s ease, border-color .15s ease, color .15s ease; }