/*
 * Design tokens — L3 Energia
 * ---------------------------------------------------------
 * Direção: instrumentação de engenharia solar (monitor de inversor,
 * diagrama unifilar), não o "dark mode + gradiente verde" genérico.
 * Paleta preta com os acentos oficiais da marca L3:
 * laranja solar e azul acinzentado institucional.
 */

:root {
  /* --- Cor: base --- */
  --l3-void: #000000;       /* fundo principal */
  --l3-void-2: #000000;     /* fundo de seção alternada */
  --l3-panel: #020202;      /* superfície de cards/painéis */
  --l3-panel-2: #070707;    /* superfície elevada (hover, painel ativo) */
  --l3-grid-line: #26333c;  /* linhas técnicas / bordas */
  --l3-grid-line-soft: rgba(118, 142, 158, 0.22);

  /* --- Cor: acentos ---
     Valores batidos com o manual de marca (GRUPO L3_IDENTIDADE VISUAL):
     cinza azulado = Pantone 2165 C / RGB 101,129,157; laranja = Pantone
     151 C / RGB 239,127,23. */
  --l3-volt: #65819d;       /* azul acinzentado oficial (Pantone 2165 C) — apoio e bordas */
  --l3-volt-dim: #46596f;
  --l3-volt-glow: rgba(101, 129, 157, 0.28);
  --l3-solar: #ef7f17;      /* laranja oficial (Pantone 151 C) — títulos e CTA */
  --l3-solar-dim: #b85b16;
  --l3-solar-glow: rgba(239, 127, 23, 0.34);
  /* Texto sobre fundo --l3-solar (botão CTA principal). Preto quase puro
     rende contraste WCAG AA (~7:1) contra o laranja — não é seguro
     assumir o mesmo tom funciona pra qualquer cor de acento (não funciona
     pro vermelho do mercado .py, testado e o override troca isso). */
  --l3-solar-text: #1a1204;
  /* Cor "solar" usada como texto pequeno sobre fundo escuro (links,
     badges) — separada de --l3-solar porque o mercado .py precisa de
     um tom mais claro aqui pra passar WCAG AA, sem clarear o vermelho
     do botão/CTA principal, que já resolve contraste via --l3-solar-text. */
  --l3-solar-label: var(--l3-solar);
  --l3-ember: #ff7a18;      /* laranja neon do sol animado */
  --l3-ember-dim: #c45b10;
  --l3-ember-glow: rgba(255, 122, 24, 0.38);

  /* --- Cor: texto --- */
  --l3-white: #f5f7fa;
  --l3-mist: #f5f7fa;
  --l3-mist-dim: #a5b4bf;
  --l3-mist-faint: #6f8594;

  /* --- Estado --- */
  --l3-success: #4ade80;
  --l3-error: #f87171;

  /* --- Tipografia ---
     Trocamos a fonte de exibição condensada (Big Shoulders Display)
     por uma sans refinada e legível em caixa mista — o objetivo é
     sofisticação editorial, não pôster industrial gritado em caps-lock. */
  --font-display: "Instrument Sans", "IBM Plex Sans", sans-serif;
  --font-body: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace;

  --fs-hero: clamp(2.75rem, 4vw + 1.75rem, 7rem);
  --fs-h1: clamp(2.25rem, 2.6vw + 1.5rem, 4rem);
  --fs-h2: clamp(1.85rem, 1.8vw + 1.3rem, 2.85rem);
  --fs-h3: clamp(1.3rem, 0.8vw + 1.1rem, 1.65rem);
  --fs-body-lg: 1.25rem;
  --fs-body: 1.05rem;
  --fs-small: 0.875rem;
  --fs-mono: 0.85rem;
  --fs-eyebrow: 0.8rem;

  --lh-tight: 1.06;
  --lh-snug: 1.2;
  --lh-body: 1.65;

  --ls-display: -0.01em;
  --ls-eyebrow: 0.22em;

  /* --- Espaçamento --- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-6: 1.5rem;
  --space-8: 2rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --container-max: 1280px;
  --container-pad: clamp(1.25rem, 4vw, 3rem);

  /* --- Forma --- */
  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 18px;
  --radius-pill: 999px;

  /* --- Sombra / brilho --- */
  --shadow-panel: 0 24px 70px -28px rgba(0, 0, 0, 0.65);
  --shadow-glow-volt: 0 0 48px var(--l3-volt-glow);
  --shadow-glow-solar: 0 0 48px var(--l3-solar-glow);

  /* --- Movimento --- */
  --ease-technical: cubic-bezier(0.16, 0.84, 0.32, 1);
  --dur-fast: 160ms;
  --dur-base: 320ms;
  --dur-slow: 640ms;

  /* --- Camadas --- */
  --z-header: 100;
  --z-whatsapp: 90;
  --z-modal: 200;
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --dur-fast: 0ms;
    --dur-base: 0ms;
    --dur-slow: 0ms;
  }
}

/* Os espaçamentos grandes (usados em padding de seção, gaps entre
   itens de lista etc.) foram calibrados pra telas largas. Sem reduzir
   eles no mobile, toda seção do site herda ~6-8rem de vão vazio em
   cima/embaixo — numa tela de 375px isso é mais espaço em branco do
   que conteúdo, e a página inteira parece "quebrada"/desproporcional
   mesmo sem nenhum elemento sobrepondo o outro. */
@media (max-width: 820px) {
  :root {
    --space-12: 2rem;
    --space-16: 2.5rem;
    --space-24: 3.5rem;
    --space-32: 4.5rem;
  }
}