/* ==========================================================================
   LUBTECH — DESIGN TOKENS v1.0
   Extraído de: Catálogo Lubtech 2026 · Soluções Lubtech — INCO A4
   Documentação completa: DESIGN.md
   ========================================================================== */

/* ---------- FONTES --------------------------------------------------------
   Archivo Expanded: instância wdth 125 da Archivo variável.
   Archivo © Omnibus-Type — SIL Open Font License 1.1 (ver fonts/OFL.txt).
   Montserrat © Julieta Ulanovsky et al. — SIL OFL 1.1 (Google Fonts).
   -------------------------------------------------------------------------- */
@font-face {
  font-family: 'Archivo Expanded';
  src: url('../fonts/ArchivoExpanded-var-wght.woff2') format('woff2-variations');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  /* ---------- MARCA ---------------------------------------------------- */
  --lt-primary:        #ffd80b;  /* Amarelo Lubtech — única cor de ação      */
  --lt-primary-deep:   #fece00;  /* equivalente CMYK / impresso              */
  --lt-primary-press:  #e0bc00;  /* estado pressionado                       */
  --lt-primary-dim:    #ab8b0c;  /* desabilitado sobre escuro                */
  --lt-primary-on-light: #7a5f00; /* acento quando ele PRECISA ser traço ou
                                     texto sobre claro — seta de diagrama,
                                     série de gráfico. 5.4:1 sobre o canvas
                                     claro. Nunca como preenchimento.        */

  /* ---------- SUPERFÍCIES ESCURAS (registro da marca) ------------------ */
  --lt-ink:            #231f20;  /* chão da marca — preto quente, nunca #000 */
  --lt-ink-deep:       #171415;  /* sangria de slide, base de scrim          */
  --lt-ink-raised:     #3d3a3b;  /* barra de seção, cabeçalho de tabela      */
  --lt-ink-hairline:   #4a4648;  /* divisor 1px no escuro                    */

  /* ---------- SUPERFÍCIES CLARAS (registro de leitura) ----------------- */
  --lt-canvas-light:   #f2f2f2;
  --lt-surface-card:   #ffffff;
  --lt-surface-sunken: #e8e8e8;
  --lt-hairline-light: #e3e3e3;

  /* ---------- TEXTO ---------------------------------------------------- */
  --lt-body-light:     #2e2e2e;  /* corpo sobre claro                        */
  --lt-muted:          #5c5a5a;  /* secundário sobre claro — 6.1:1, mínimo   */
  --lt-muted-soft:     #868485;  /* decorativo/disabled — 3.3:1, NÃO em corpo*/
  --lt-steel:          #868485;  /* ilustração técnica, ícone                */
  --lt-on-ink:         #ffffff;
  --lt-on-ink-muted:   #b8b6b6;
  --lt-on-primary:     #231f20;  /* SEMPRE tinta sobre amarelo, nunca branco */

  /* ---------- APOIO INDUSTRIAL ----------------------------------------- */
  --lt-petrol:         #003a55;
  --lt-petrol-deep:    #0c2a3b;

  /* ---------- ESPECTRO DE CATEGORIA (wayfinding apenas) ---------------- */
  --lt-cat-01-orificio:      #2e1760;  /* Sistema Orifício/Resistivo        */
  --lt-cat-02-linha-simples: #3323a6;  /* Sistema Linha Simples             */
  --lt-cat-03-progressiva:   #7080b9;  /* Sistema Linha Progressiva         */
  --lt-cat-04-linha-unica:   #a5c1ec;  /* Linha Única    — texto em --lt-ink*/
  --lt-cat-05-linha-dupla:   #618669;  /* Sistema Linha Dupla               */
  --lt-cat-06-ar-oleo:       #6bb479;  /* Sistema Ar-Óleo / MQL             */
  --lt-cat-07-agricola:      #90c648;  /* Linha Agrícola — texto em --lt-ink*/
  --lt-cat-08-circulatoria:  #13a637;  /* Circulatórios & Especiais         */
  --lt-cat-09-acessorios:    #cc4e00;  /* Acessórios                        */
  --lt-cat-10-servicos:      #d01818;  /* Serviços                          */

  /* ---------- SEMÂNTICAS ----------------------------------------------- */
  --lt-success: #13a637;
  --lt-warning: #cc4e00;  /* laranja, NÃO amarelo — amarelo é a voltagem    */
  --lt-danger:  #d01818;

  /* ---------- TIPOGRAFIA ----------------------------------------------- */
  /* Archivo Expanded = Archivo (Omnibus-Type, OFL) fixada no eixo wdth 125.
     Display roda em peso 900. Substitui a CY Grotesk Grand do catálogo —
     ver "De onde vem a Archivo Expanded" no DESIGN.md.
     Web: fonts/ArchivoExpanded-var-wght.woff2 (peso variável).
     PowerPoint/Keynote/Slides não suportam eixos variáveis — instale as
     estáticas em fonts/ (Regular, Bold, Black).                            */
  --lt-font-display: 'Archivo Expanded', 'Archivo',
                     system-ui, -apple-system, sans-serif;
  --lt-font-body:    'Montserrat', system-ui, -apple-system, sans-serif;

  --lt-weight-display: 900;   /* display é sempre Black                     */
  --lt-weight-display-light: 400;  /* só o token display-sm                 */

  --lt-size-display-hero: 72px;
  --lt-size-display-xl:   56px;
  --lt-size-display-lg:   40px;
  --lt-size-display-md:   30px;
  --lt-size-display-sm:   24px;
  --lt-size-numeral:     120px;
  --lt-size-title-lg:     20px;
  --lt-size-body-lg:      18px;
  --lt-size-title-md:     16px;
  --lt-size-body-md:      16px;
  --lt-size-bar-label:    15px;
  --lt-size-button:       15px;
  --lt-size-body-sm:      14px;
  --lt-size-nav:          14px;
  --lt-size-spec:         13px;
  --lt-size-eyebrow:      13px;
  --lt-size-caption:      12px;

  --lt-track-display:        0;  /* padrão: zero. A Archivo Expanded já é
                                    larga e apertada — adicionar tracking
                                    perde a textura compacta da marca.      */
  --lt-track-display-large: -0.01em;  /* aperto óptico só acima de 56px     */
  --lt-track-eyebrow:   0.24em;  /* assinatura tipográfica da marca         */
  --lt-track-button:    0.06em;
  --lt-track-nav:       0.08em;

  /* ---------- ESPAÇAMENTO (base 4) ------------------------------------- */
  --lt-sp-1:    4px;
  --lt-sp-2:    8px;
  --lt-sp-3:   12px;
  --lt-sp-4:   16px;
  --lt-sp-5:   20px;
  --lt-sp-6:   24px;
  --lt-sp-8:   32px;
  --lt-sp-12:  48px;
  --lt-sp-16:  64px;
  --lt-sp-24:  96px;   /* ritmo de seção — site                            */
  --lt-sp-32: 128px;   /* ritmo de slide                                   */

  /* ---------- FORMA ---------------------------------------------------- */
  --lt-r-xs:    4px;   /* barra de seção, badge                            */
  --lt-r-sm:    6px;   /* linha de índice                                  */
  --lt-r-md:    8px;   /* botão, campo, pílula de URL                      */
  --lt-r-lg:   14px;   /* card                                             */
  --lt-r-plate:16px;   /* placa do logotipo, painel fumê                   */
  --lt-r-xl:   20px;   /* painel grande de slide                           */
  --lt-r-pill: 9999px; /* raro — avatar, tag de filtro                     */

  /* ---------- PROFUNDIDADE (scrim e painel, não sombra) ---------------- */
  --lt-shadow-panel:  0 4px 24px rgba(0, 0, 0, .18);
  --lt-shadow-card:   0 2px 10px rgba(35, 31, 32, .10);
  --lt-shadow-lifted: 0 12px 40px rgba(0, 0, 0, .35);
  --lt-scrim: linear-gradient(180deg, rgba(23,20,21,.35) 0%, rgba(23,20,21,.82) 100%);
  --lt-panel-smoke: rgba(35, 31, 32, .88);

  /* ---------- LAYOUT --------------------------------------------------- */
  --lt-container: 1240px;
  --lt-gutter:      24px;
  --lt-side-tab:    44px;
}

/* ==========================================================================
   PAPÉIS SEMÂNTICOS POR REGISTRO
   Escuro é o registro da marca (padrão). Claro é o registro de leitura.
   Aplique data-register="light" na seção ou no <html>.
   ========================================================================== */

:root,
[data-register="dark"] {
  --lt-ground:    var(--lt-ink-deep);
  --lt-surface:   var(--lt-ink);
  --lt-raised:    var(--lt-ink-raised);
  --lt-rule:      var(--lt-ink-hairline);
  --lt-fg:        var(--lt-on-ink);
  --lt-fg-muted:  var(--lt-on-ink-muted);
  --lt-link:      var(--lt-primary);
  --lt-accent:    var(--lt-primary);        /* traço de diagrama e gráfico */
}

[data-register="light"] {
  --lt-ground:    var(--lt-canvas-light);
  --lt-surface:   var(--lt-surface-card);
  --lt-raised:    var(--lt-surface-sunken);
  --lt-rule:      var(--lt-hairline-light);
  --lt-fg:        var(--lt-body-light);
  --lt-fg-muted:  var(--lt-muted);
  --lt-link:      var(--lt-ink);   /* amarelo reprova como texto sobre claro */
  --lt-accent:    var(--lt-primary-on-light);
}

/* ==========================================================================
   RECEITAS-CHAVE
   ========================================================================== */

/* Display — SEMPRE caixa alta, SEMPRE peso 900 */
.lt-display {
  font-family: var(--lt-font-display);
  font-weight: var(--lt-weight-display);
  text-transform: uppercase;
  line-height: 1.02;
  letter-spacing: var(--lt-track-display);
  text-wrap: balance;
}
/* acima de 56px, aperto óptico */
.lt-display--hero,
.lt-display--xl { letter-spacing: var(--lt-track-display-large); }

/* Sobrancelha — tracking largo, a respiração da marca */
.lt-eyebrow {
  font-family: var(--lt-font-body);
  font-size: var(--lt-size-eyebrow);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--lt-track-eyebrow);
}

/* Manchete de duas vozes — a hierarquia é por cor, não por tamanho */
.lt-headline { font-family: var(--lt-font-display); text-transform: uppercase; line-height: 1.06; }
.lt-headline > .lt-voice-1 { display: block; color: var(--lt-primary); font-weight: 600; }
.lt-headline > .lt-voice-2 { display: block; color: var(--lt-on-ink); font-weight: 700; }

/* Painel fumê — o dispositivo central da marca */
.lt-panel-smoke {
  background: var(--lt-panel-smoke);
  border-radius: var(--lt-r-plate);
  padding: var(--lt-sp-12);
  box-shadow: var(--lt-shadow-panel);
  color: var(--lt-on-ink);
  max-width: min(70%, 720px);
}

/* CTA primário — tinta sobre amarelo, nunca branco */
.lt-btn-primary {
  background: var(--lt-primary);
  color: var(--lt-on-primary);
  font-family: var(--lt-font-body);
  font-size: var(--lt-size-button);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--lt-track-button);
  border: 0;
  border-radius: var(--lt-r-md);
  padding: 15px 28px;
  min-height: 48px;
}
.lt-btn-primary:active { background: var(--lt-primary-press); }

/* Barra de seção — rótulo amarelo sobre superfície elevada escura */
.lt-section-bar {
  background: var(--lt-ink-raised);
  color: var(--lt-primary);
  font-family: var(--lt-font-body);
  font-size: var(--lt-size-bar-label);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-radius: var(--lt-r-xs);
  padding: 14px 24px;
  min-height: 48px;
}

/* Link — o amarelo vira marcador sobre claro, não texto */
.lt-link {
  color: var(--lt-link);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 2px solid var(--lt-primary);
}
.lt-link:hover { background: var(--lt-primary); color: var(--lt-on-primary); }

/* Ficha técnica — rótulo negrito + valor regular, 13px */
.lt-spec { font-size: var(--lt-size-spec); line-height: 1.5; }
.lt-spec b { font-weight: 700; text-transform: uppercase; }

/* Marca d'água técnica — hexágono a ~4%, só sobre superfície clara */
.lt-watermark {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='97' viewBox='0 0 56 97'%3E%3Cpath d='M28 0 L56 16 L56 48 L28 64 L0 48 L0 16 Z M28 64 L28 97' fill='none' stroke='%23868485' stroke-opacity='.10' stroke-width='1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   RESPONSIVO
   ========================================================================== */
@media (max-width: 1024px) {
  :root { --lt-size-display-hero: 48px; --lt-size-display-xl: 40px; }
  /* side-tab desaparece; a categoria vira badge acima do título */
}
@media (max-width: 640px) {
  :root {
    --lt-size-display-hero: 34px;
    --lt-size-display-xl:   28px;
    --lt-size-display-lg:   24px;
    --lt-size-numeral:      64px;
    --lt-sp-24: 64px;
    --lt-sp-32: 72px;
  }
  /* painel fumê perde a translucidez e vira bloco --lt-ink sólido */
  .lt-panel-smoke {
    background: var(--lt-ink);
    max-width: 100%;
    padding: var(--lt-sp-6);
  }
}