/* =============================================
   DESIGN TOKENS — Local Power
   ============================================= */

:root {
  /* -- Fontes -- */
  --font-primary: 'Extatica', 'IBM Plex Sans Condensed', sans-serif;
  --font-secondary: 'IBM Plex Sans Condensed', sans-serif;

  /* -- Primary -- */
  --color-primary-10: #fdf5ef;
  --color-primary-40: #fbe7d9;
  --color-primary-60: #d54721;
  --color-primary-100: #72261c;
  --color-primary-pure: #ff5300;

  /* -- Neutral -- */
  --color-neutral-10: #f6f6f6;
  --color-neutral-20: #e7e7e7;
  --color-neutral-30: #dad7d9;
  --color-neutral-40: #b0b0b0;
  --color-neutral-60: #6c6c6c;
  --color-neutral-70: #5d5d5d;
  --color-neutral-100: #362e2e;
  --color-neutral-bg: #eae9e9;
  --color-neutral-borda: #776d6f;
  --color-neutral-borda-sutil: #d1d1d1;

  /* -- Larguras de borda estrutural (desktop 2px / mobile 1px, ver responsive.css) -- */
  --border-width: 2px;

  /* -- Brand -- */
  --color-brand-01: #f15922;
  --color-brand-02: #706b6f;
  --color-brand-03: #44408b;

  /* -- Generic -- */
  --color-white: #ffffff;
  --color-black: #000000;
  --color-black-10: rgba(0, 0, 0, 0.1);
  --color-white-80: rgba(255, 255, 255, 0.8);

  /* -- Base font scaling -- */
  --font-base: 100%;

  /* -- Altura do header/menu (refinada via JS em setHeaderHeight();
        usada no padding-top das páginas sem hero de imagem). Fallback: -- */
  --header-height: 74px;
}

/* Fallback mobile antes do JS (header encolhe a partir de 1180px) */
@media (max-width: 1180px) {
  :root {
    --header-height: 64px;
  }
}