:root {
  /* ============================================
     CORES — Extraídas dos JSONs do Elementor
     ============================================ */

  /* Paleta principal da marca */
  --cor-dourado: #C2A776;              /* COR PRINCIPAL — títulos, links, hover, acentos */
  --cor-dourado-alt: #d3b574;          /* Variação clara — bordas e detalhes */

  /* Base escura (header e footer) */
  --cor-preto: #1D1D1D;                /* Fundo do header e footer */
  --cor-off-white: #F2F1EE;            /* Texto sobre fundo preto (menu) */
  --cor-off-white-trans: #F2F1EE38;    /* Hover translúcido do hamburger mobile */

  /* Texto e conteúdo */
  --cor-titulo: #16163f;               /* Azul-marinho quase preto — headings do post */
  --cor-corpo: #4a4a4a;                /* Cinza escuro — corpo de texto, metadados */
  --cor-hover-lista: #2D3748;          /* Hover de links em listas */

  /* Backgrounds e bordas */
  --cor-fundo: #FFFFFF;
  --cor-borda-clara: #DDDDDD;          /* Bordas em listas de categoria */
  --cor-borda-suave: rgba(22, 22, 63, 0.2);  /* Separadores da sidebar do post */
  --cor-divider: #d2d1d8;              /* Separador da navegação de post */

  /* ============================================
     TIPOGRAFIA — 4 famílias em uso real no site
     ============================================ */

  --fonte-display: 'League Spartan', sans-serif;   /* Menu, H1/H2, pagination, metadados */
  --fonte-texto: 'Lato', sans-serif;                /* Corpo, excerpts, títulos de sidebar */
  --fonte-cards: 'Montserrat', sans-serif;          /* Cards relacionados, navegação de post */
  --fonte-botao: 'Roboto', sans-serif;              /* Botões CTA (ex: "Produtos Recomendados") */

  /* Tamanhos (valores exatos dos JSONs) */
  --tamanho-menu: 16px;
  --tamanho-h1-post: 35px;             /* desktop */
  --tamanho-h1-tablet: 38px;
  --tamanho-h1-mobile: 30px;
  --tamanho-hero-icon: 45px;           /* Categoria no hero do post */
  --tamanho-sidebar-titulo: 20px;
  --tamanho-excerpt: 18px;
  --tamanho-excerpt-mobile: 25px;
  --tamanho-corpo: 16px;
  --tamanho-card-titulo: 16px;
  --tamanho-card-excerpt: 14px;
  --tamanho-footer-titulo: 14px;
  --tamanho-footer-titulo-mobile: 10px;
  --tamanho-footer-email: 12px;

  /* Line heights */
  --lh-titulo-post: 1.1;
  --lh-excerpt: 1.4;
  --lh-cards: 1.2;

  /* ============================================
     LAYOUT E ESPAÇAMENTOS
     ============================================ */

  --largura-max: 1200px;               /* Container principal do single post */
  --largura-hero-post: 650px;          /* Box interno do hero do single post */
  --largura-conteudo-post: 65%;        /* Coluna de conteúdo no single post */
  --largura-sidebar-post: 35%;         /* Coluna de sidebar no single post */
  --largura-conteudo-home: 66.66%;     /* Coluna de posts na home */
  --largura-sidebar-home: 33.33%;      /* Sidebar na home */

  --altura-hero-post: 491px;
  --altura-hero-min: 250px;

  --padding-container: 4%;
  --padding-container-mobile: 25px;

  /* Espaçamentos verticais */
  --espaco-xs: 10px;
  --espaco-sm: 20px;
  --espaco-md: 50px;
  --espaco-lg: 80px;
  --espaco-xl: 100px;
  --espaco-2xl: 150px;

  /* ============================================
     OUTROS
     ============================================ */

  --raio-sm: 5px;                      /* Border-radius ícones sociais do footer */
  --raio-md: 10px;                     /* Border-radius dos cards relacionados */
  --raio-lg: 16px;

  --transicao-rapida: 150ms ease;
  --transicao-media: 300ms ease;
  --transicao-lenta: 500ms ease;
}