/**
 * variables.css
 *
 * Ponto único de verdade pra cor, fonte e espaçamento do tema.
 * Qualquer arquivo CSS daqui pra frente usa var(--nome), nunca hexadecimal solto.
 * Isso facilita ajustar a paleta inteira mexendo só aqui.
 */

:root {
  /* ===== Cor ===== */
  --cor-creme-1: #F0F1EB;
  --cor-creme-2: #f6f8ed;
  --cor-preto: #1A1A1A;
  --cor-vermelho: #C0392B;
  --cor-vermelho-escuro: #8B2E22;
  --cor-body: #F0F1EB;
  --cor-destaque: #FAF8F5;

  --cor-texto: var(--cor-preto);
  --cor-texto-suave: #5A5A54;
  --cor-borda: rgba(26, 26, 26, 0.15);
  --cor-borda-forte: rgba(26, 26, 26, 0.35);
  --cor-fundo: var(--cor-creme-1);


  /* ===== Tipografia ===== */
  --fonte-display: "Fraunces", Georgia, serif;
  /* títulos, nome da livraria */
  --fonte-corpo: "Literata", Georgia, serif;
  /* texto corrido, descrições */
  --fonte-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  /* botões, labels */

  /* ===== Espaçamento (escala consistente, evita valores soltos) ===== */
  --esp-xs: 0.25rem;
  --esp-sm: 0.5rem;
  --esp-md: 1rem;
  --esp-lg: 1.5rem;
  --esp-xl: 2rem;
  --esp-2xl: 3rem;

  /* ===== Transição (mesma sensação em todo o site) ===== */
  --dur-rapida: 150ms;
  --dur-base: 250ms;
  --easing: cubic-bezier(0.25, 0.1, 0.25, 1);

  /* ===== Layout ===== */
  --largura-maxima: 1200px;
  --raio-borda: 8px;
  --raio-pill: 999px;

  /* ===== Header ===== */
  --altura-header-mobile: auto;
  --altura-header-desktop: 88px;

  /* ===== Box Shadow ===== */
  --box-shadow: 0px 2px 10px -4px rgba(0, 0, 0, 0.4);
}