/* =============================================================
   DOCES PALESTINA — Variáveis CSS (Design Tokens)
   Arquivo: assets/css/variaveis.css
   Desenvolvedor: Juliano Alves
   Descrição: Tokens centrais de design: cores, tipografia,
              espaçamentos, sombras e transições.
   ============================================================= */

:root {

  /* -----------------------------------------------------------
     Paleta de cores principal
     ----------------------------------------------------------- */
  --cor-primaria:       #5C2E00;   /* Marrom escuro */
  --cor-primaria-claro: #8B4513;   /* Marrom médio */
  --cor-primaria-hover: #3D1E00;   /* Marrom escuro no hover */

  --cor-acento:         #F5C518;   /* Amarelo ouro */
  --cor-acento-hover:   #D4A017;   /* Amarelo ouro escurecido */
  --cor-acento-claro:   #FEF3C7;   /* Amarelo muito claro (fundo) */

  --cor-destaque:       #CC1F1F;   /* Vermelho */
  --cor-destaque-hover: #A01818;   /* Vermelho escuro no hover */

  --cor-branco:         #FFFFFF;
  --cor-fundo:          #FDF8F2;   /* Branco levemente quente */
  --cor-fundo-alt:      #F5ECD8;   /* Bege claro para seções alternadas */

  --cor-texto:          #2D1A00;   /* Marrom muito escuro (quase preto) */
  --cor-texto-suave:    #6B4C2A;   /* Marrom médio para textos secundários */
  --cor-texto-claro:    #A07850;   /* Para rótulos, metadados */

  --cor-borda:          #DDD0BB;   /* Borda sutil em tons quentes */
  --cor-sombra:         rgba(92, 46, 0, 0.12);

  /* -----------------------------------------------------------
     Tipografia
     ----------------------------------------------------------- */
  --fonte-titulo:  'Montserrat', sans-serif;
  --fonte-corpo:   'Open Sans', sans-serif;

  --tamanho-xs:    0.75rem;    /* 12px */
  --tamanho-sm:    0.875rem;   /* 14px */
  --tamanho-base:  1rem;       /* 16px */
  --tamanho-md:    1.125rem;   /* 18px */
  --tamanho-lg:    1.25rem;    /* 20px */
  --tamanho-xl:    1.5rem;     /* 24px */
  --tamanho-2xl:   1.875rem;   /* 30px */
  --tamanho-3xl:   2.25rem;    /* 36px */
  --tamanho-4xl:   3rem;       /* 48px */
  --tamanho-5xl:   3.75rem;    /* 60px */

  --peso-normal:   400;
  --peso-medio:    500;
  --peso-semi:     600;
  --peso-bold:     700;
  --peso-extrabold:800;

  --linha-altura:      1.6;
  --linha-altura-titulo: 1.2;

  /* -----------------------------------------------------------
     Espaçamentos (escala 8px)
     ----------------------------------------------------------- */
  --esp-1:   0.25rem;    /*  4px */
  --esp-2:   0.5rem;     /*  8px */
  --esp-3:   0.75rem;    /* 12px */
  --esp-4:   1rem;       /* 16px */
  --esp-5:   1.25rem;    /* 20px */
  --esp-6:   1.5rem;     /* 24px */
  --esp-8:   2rem;       /* 32px */
  --esp-10:  2.5rem;     /* 40px */
  --esp-12:  3rem;       /* 48px */
  --esp-16:  4rem;       /* 64px */
  --esp-20:  5rem;       /* 80px */
  --esp-24:  6rem;       /* 96px */

  /* -----------------------------------------------------------
     Bordas e arredondamentos
     ----------------------------------------------------------- */
  --raio-sm:   0.375rem;
  --raio-md:   0.625rem;
  --raio-lg:   1rem;
  --raio-xl:   1.5rem;
  --raio-full: 9999px;

  /* -----------------------------------------------------------
     Sombras
     ----------------------------------------------------------- */
  --sombra-sm:  0 1px 3px rgba(92, 46, 0, 0.08), 0 1px 2px rgba(92, 46, 0, 0.05);
  --sombra-md:  0 4px 12px rgba(92, 46, 0, 0.10), 0 2px 4px rgba(92, 46, 0, 0.06);
  --sombra-lg:  0 10px 30px rgba(92, 46, 0, 0.12), 0 4px 8px rgba(92, 46, 0, 0.06);
  --sombra-xl:  0 20px 60px rgba(92, 46, 0, 0.15), 0 8px 16px rgba(92, 46, 0, 0.08);

  /* -----------------------------------------------------------
     Transições
     ----------------------------------------------------------- */
  --trans-rapida:  all 0.15s ease;
  --trans-normal:  all 0.25s ease;
  --trans-lenta:   all 0.4s ease;

  /* -----------------------------------------------------------
     Layout
     ----------------------------------------------------------- */
  --container-max: 1200px;
  --container-pad: var(--esp-4);

  /* -----------------------------------------------------------
     Header
     ----------------------------------------------------------- */
  --header-altura:        72px;
  --header-altura-mobile: 60px;
}

/* Modo escuro — reservado para expansão futura */
@media (prefers-color-scheme: dark) {
  :root {
    /* Mantém identidade visual — sem inversão forçada */
  }
}