/* ============================================================================
   JM ELETRO MOTORES · DESIGN SYSTEM · 01 TOKENS
   Fonte da verdade: DESIGN.md (manual de identidade v1.0 / 2026).
   Nenhum valor de cor, fonte ou espaço deve ser escrito solto no CSS das
   seções — tudo sai daqui.
   ========================================================================= */

:root{

  /* --- 1. Cores da marca (exatas do manual, não alterar) ----------------- */
  --brand-azul:   #0A2036;   /* Azul Profundo · base, 70% da aplicação      */
  --brand-gelo:   #EEF3F8;   /* Branco Gelo · superfície e respiro          */
  --brand-cobre:  #C98A4B;   /* Cobre · acento único, máx. 10% da superfície*/
  --brand-aco:    #1B3E63;   /* Azul Aço · camadas e cartelas               */
  --brand-cinza:  #8598AB;   /* Cinza Técnico · apoio e cotas               */

  /* --- 2. Superfícies ---------------------------------------------------- */
  --sf-base:      var(--brand-gelo);        /* fundo da página              */
  --sf-elevada:   #F9FBFD;                  /* placa/cartela, nunca branco  */
  --sf-escura:    var(--brand-azul);        /* blocos azuis                 */
  --sf-escura-2:  var(--brand-aco);         /* camada dentro do bloco azul  */

  /* --- 3. Tinta (texto) --------------------------------------------------
     Dois conjuntos: sobre claro (-c) e sobre escuro (-e).                   */
  --ink-c-forte:  var(--brand-azul);
  --ink-c-corpo:  #45586C;
  --ink-c-fraco:  var(--brand-cinza);
  --ink-e-forte:  var(--brand-gelo);
  --ink-e-corpo:  #B9C6D3;
  --ink-e-fraco:  var(--brand-cinza);
  --ink-acento:   var(--brand-cobre);

  /* --- 4. Linhas (a estética é de desenho técnico: só hairline) ---------- */
  --linha-c:      rgba(10, 32, 54, .16);    /* hairline sobre claro         */
  --linha-c-forte:rgba(10, 32, 54, .32);
  --linha-e:      rgba(238, 243, 248, .22); /* hairline sobre escuro        */
  --linha-e-forte:rgba(238, 243, 248, .42);
  --linha-cobre:  rgba(201, 138, 75, .55);
  --traco:        1px;                       /* espessura única do sistema  */

  /* --- 5. Tipografia ----------------------------------------------------- */
  --f-tit:  "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-txt:  "IBM Plex Sans", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* escala fluida — clamp(min, preferido, max) */
  --t-display: clamp(2.35rem, 1.55rem + 3.4vw, 3.9rem);
  --t-h2:      clamp(1.8rem,  1.35rem + 1.9vw, 2.7rem);
  --t-h3:      clamp(1.08rem, 1.02rem + .3vw, 1.3rem);
  --t-corpo-g: 1.06rem;
  --t-corpo:   1rem;
  --t-corpo-p: .92rem;
  --t-dado:    .78rem;   /* mono · ficha técnica, cotas                     */
  --t-dado-p:  .72rem;   /* mono · legendas, etiquetas                      */

  --lh-tit:    1.08;
  --lh-corpo:  1.65;
  --ls-tit:    -.015em;
  --ls-mono:   .1em;     /* mono sempre com tracking largo (cota de desenho)*/

  /* --- 6. Espaço · base 4px ---------------------------------------------- */
  --s-1:  .25rem;  --s-2: .5rem;   --s-3: .75rem;  --s-4: 1rem;
  --s-5:  1.5rem;  --s-6: 2rem;    --s-7: 2.5rem;  --s-8: 3rem;
  --s-9:  4rem;    --s-10: 5rem;   --s-11: 6rem;   --s-12: 8rem;

  /* ritmo vertical das seções (compacta no mobile, ampla no desktop) */
  --secao-y: clamp(3.6rem, 2.4rem + 4vw, 5.5rem);

  /* --- 7. Layout ---------------------------------------------------------- */
  --wrap-max: 1100px;
  --gutter:   2.75rem;
  --wrap:     min(var(--wrap-max), 100% - var(--gutter));

  /* --- 8. Movimento ------------------------------------------------------- */
  --ease-saida: cubic-bezier(.19, 1, .22, 1);   /* expo out · reveals       */
  --ease-ui:    cubic-bezier(.4, 0, .2, 1);     /* micro-interação          */
  --dur-1:  .15s;   /* hover, estado                                        */
  --dur-2:  .35s;   /* transição de componente                              */
  --dur-3:  .7s;    /* entrada de bloco                                     */

  /* --- 9. Camadas --------------------------------------------------------- */
  --z-fundo:   0;
  --z-base:    1;
  --z-topo:   50;
  --z-flutua: 60;

  /* --- 10. Sombra · usada só no botão flutuante (marca é plana) ---------- */
  --sombra-flutua: 0 8px 24px rgba(10, 32, 54, .28);
}

/* Passo de grade do papel milimetrado usado no fundo do hero.
   Vive aqui porque é token visual, não decoração de seção. */
:root{
  --grade-passo: 28px;
  --grade-cor:   rgba(10, 32, 54, .05);
  --grade-cor-e: rgba(238, 243, 248, .06);
}