/*
Theme Name: ForYou Personalizados
Theme URI: https://foryoupersonalizados.com.br
Description: Tema filho do Storefront para a loja ForYou Personalizados. Design clean, premium, com paleta neutra e detalhes em dourado.
Author: ForYou Personalizados
Author URI: https://foryoupersonalizados.com.br
Template: storefront
Version: 1.1.7
Text Domain: foryou-theme
*/

/* =========================================================
   VARIÁVEIS DE DESIGN
   ---------------------------------------------------------
   Aqui ficam as "cores oficiais" e medidas do tema.
   Mudou aqui, mudou no site inteiro. É como o catálogo
   de tintas de uma loja: o pintor consulta este catálogo
   antes de pintar qualquer parede.
   ========================================================= */
:root {
  /* Paleta principal — design V3 aprovado em jun/2026 */
  --cor-fundo: #FAFAF9;           /* Off-white levemente mais frio, menos amarelado */
  --cor-fundo-branco: #FFFFFF;    /* Cards, caixas, fundo de seções */
  --cor-texto: #1C1917;           /* Grafite quente (mais rico que preto puro) */
  --cor-texto-suave: #57534E;     /* Grafite médio para textos secundários */
  --cor-destaque: #A16207;        /* Dourado âmbar (mais escuro e sofisticado) */
  --cor-destaque-escuro: #854D0E; /* Dourado escuro para hover dos botões */
  --cor-borda: #E7E5E4;           /* Fio fino para bordas de cards e divisórias */
  --cor-muted: #F5F5F4;           /* Fundo de placeholders e áreas neutras */

  /* Tons para a seção escura (gravação ao vivo) */
  --grafite: #1C1917;             /* Fundo da seção de gravação */
  --grafite-2: #292524;           /* Gradiente da seção de gravação */
  --dourado-claro: #D9A93E;       /* Dourado brilhante: texto gravado e ícones no escuro */

  /* Espaçamentos padrão (mobile-first) */
  --espaco-pequeno: 8px;
  --espaco-medio: 16px;
  --espaco-grande: 32px;
  --espaco-enorme: 64px;
  --respiro: 104px;               /* Espaço generoso entre seções (desktop) */

  /* Tipografia */
  --fonte-principal: 'Inter', system-ui, -apple-system, sans-serif;
  --fonte-titulos: 'Playfair Display', Georgia, serif;
  --fonte-manuscrita: 'Great Vibes', cursive; /* Usada no preview de gravação */
}

/* =========================================================
   RESET LEVE
   ---------------------------------------------------------
   Cada navegador tem padrões diferentes (margens, paddings).
   Esse reset zera as diferenças pra começarmos do mesmo
   ponto em qualquer navegador. É como nivelar o piso antes
   de assentar o azulejo.
   ========================================================= */
*,
*::before,
*::after {
  box-sizing: border-box;  /* Largura inclui borda e padding (mais previsível) */
}

body {
  margin: 0;
  font-family: var(--fonte-principal);
  color: var(--cor-texto);
  background-color: var(--cor-fundo);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--fonte-titulos);
  color: var(--cor-texto);
  margin-top: 0;
}

a {
  color: var(--cor-destaque);
  text-decoration: none;
  transition: color 0.2s ease;
}

a:hover {
  color: var(--cor-destaque-escuro);
}

img {
  max-width: 100%;
  height: auto;  /* Imagens nunca estouram o container */
  display: block;
}