/* Barcelona Co. Power Generation Solutions: design tokens

   Sistema "placa de identificacao": a linguagem visual vem da chapa gravada
   que fica rebitada em todo gerador, transformador e painel de manobra.
   Dai saem o mono em caixa alta como rotulo, o alinhamento rigido e o
   diagrama unifilar da secao de processo.

   Verde e cinzas continuam amostrados por pixel do logo oficial
   (identidade/Logo energia atualizadp.jpg). Ver identidade/design-guide.md */

:root {
  /* ---- cor: verde do logo, agora tambem como superficie dominante ---- */
  --ink:        #0F1913;   /* verde quase preto, chao escuro da pagina */
  --forest:     #16261D;   /* superficie escura secundaria */
  --green:      #2C4E3D;   /* tinta da marca, wordmark do logo */
  --green-lift: #1E3427;   /* card sobre fundo escuro */
  --green-line: #33513F;   /* borda sobre fundo escuro */

  /* ---- cor: pedra do aqueduto. superficie clara e mineral, nunca creme ---- */
  --stone:    #E6E8E1;   /* chao claro dominante */
  --chalk:    #F5F6F3;   /* claro mais alto, usado com parcimonia */
  --concrete: #CBCEC5;   /* fio divisorio sobre claro */
  --white:    #FFFFFF;

  /* ---- acento unico ---- */
  --gold:     #F0A800;
  --gold-hi:  #F3C15C;   /* acento sobre fundo escuro */
  --gold-ink: #6F4A00;   /* unica variante legivel em texto sobre claro */

  /* ---- texto ---- */
  --text:        #16211B;   /* corpo sobre claro */
  --text-mut:    #55625B;   /* secundario sobre claro */
  --text-lt:     #E9ECE7;   /* corpo sobre escuro */
  --text-lt-mut: #9DAAA2;   /* secundario sobre escuro */

  --focus: #F3C15C;

  /* ---- tipografia ----
     Archivo: grotesca americana de sinalizacao, com eixo de largura.
     Usada em titulo, grande e semicondensada, com tracking negativo.
     IBM Plex Sans no corpo. IBM Plex Mono como rotulo de placa: caixa
     alta, espacado, sempre pequeno.
     Nao usar Inter, Roboto, Montserrat, Plus Jakarta Sans, Space Grotesk,
     Geist, Fraunces nem Instrument: todas na lista de fonte batida do
     detector do /impeccable. */
  --font-head: "Archivo", "Arial Narrow", Helvetica, sans-serif;
  --font-body: "IBM Plex Sans", "Segoe UI", system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", monospace;

  --fs-display: clamp(2.1rem, 4.6vw, 3.5rem);
  --fs-h1:      clamp(2.05rem, 4.4vw, 3.35rem);
  --fs-h2:      clamp(1.9rem, 4vw, 3.15rem);
  --fs-h3:      clamp(1.18rem, 1.7vw, 1.45rem);
  --fs-body:    1.0625rem;
  --fs-lead:    clamp(1.1rem, 1.4vw, 1.28rem);
  --fs-small:   0.9375rem;
  --fs-plate:   0.72rem;    /* rotulo mono */

  --lh-tight: 1.04;
  --lh-head:  1.1;
  --lh-body:  1.68;

  --ls-head:  -0.025em;
  --ls-plate: 0.16em;

  --wdth-head: 92%;   /* eixo de largura da Archivo, semicondensado */

  /* ---- espaco: escala unica, nada de valor solto por secao ---- */
  --sp-1: 0.25rem;  --sp-2: 0.5rem;   --sp-3: 0.75rem;  --sp-4: 1rem;
  --sp-5: 1.5rem;   --sp-6: 2rem;     --sp-7: 2.5rem;   --sp-8: 3rem;
  --sp-9: 4rem;     --sp-10: 5rem;    --sp-11: 6.5rem;  --sp-12: 8rem;

  --section-y:   clamp(4.5rem, 9vw, 9rem);
  --section-y-s: clamp(3.25rem, 6vw, 5.5rem);

  /* ---- layout ---- */
  --container:      1280px;
  --container-text: 60ch;
  --gutter:         clamp(1.25rem, 4vw, 3rem);

  /* ---- forma: aresta quase reta, como chapa cortada ---- */
  --r-sm: 1px;
  --r-md: 2px;
  --r-lg: 3px;

  --shadow-sm: 0 1px 2px rgba(15,25,19,.06);
  --shadow-md: 0 2px 6px rgba(15,25,19,.07), 0 12px 30px rgba(15,25,19,.06);

  /* ---- movimento ---- */
  --ease:     cubic-bezier(.22,.61,.36,1);
  --ease-out: cubic-bezier(.16,1,.3,1);
  --t-fast:   140ms;
  --t-mid:    280ms;
  --t-slow:   620ms;

  /* O cabecalho carrega o logo inteiro do cliente, com as tres faixas
     empilhadas (wordmark, aqueduto, descritor), entao a altura vem da
     marca, nao de um valor de habito. Altura fixa nos dois estados: a
     barra e sticky, e animar `height` nela reflui o layout a cada frame
     da rolagem. */
  --header-h: 92px;
  --brand-h:  62px;
}

@media (max-width: 900px) {
  :root {
    --header-h: 76px;
    --brand-h:  50px;
  }
}