/* =========================================================
   LES Soluções Industriais — main.css
   Design tokens, reset, base typography, layout primitives.

   Identidade oficial LES (extraída do PPT institucional):
   - Navy profundo  #0A1F3C  → fundos hero, autoridade, CTAs
   - Gold institucional #F2A93B → kickers, acentos de marca, traços técnicos
   - Cyan brilhante #2E9FE0 → variação técnica em títulos secundários (uso parcimonioso)
   - Engrenagem como elemento gráfico de marca (background ornament)
   - Display: Manrope 700/800 (sans-serif punchy)
   - Body: Manrope 400/500 (clean, geometric)
   - JetBrains Mono apenas em acentos técnicos (kickers, números, IDs)
   ========================================================= */

/* ---- DESIGN TOKENS ---- */
:root {
  /* Cores — superfície (light, base institucional) */
  --c-bg: #ffffff;
  --c-bg-soft: #f5f7fa;
  --c-bg-elev: #f8fafc;
  --c-bg-card: #ffffff;
  --c-border: #d8dee8;
  --c-border-soft: #e6ebf2;
  --c-border-strong: #aab4c2;

  /* Cores — superfícies escuras (LES navy) */
  --c-navy-deep: #0a1f3c;
  --c-navy: #0d2848;
  --c-navy-mid: #1a3a5c;
  --c-navy-soft: #2c4870;

  /* Cores — texto */
  --c-fg: #0a1f3c;
  --c-fg-secondary: #2c4870;
  --c-fg-muted: #6b7689;
  --c-fg-dim: #9ba3b3;

  /* Cor — acento principal (LES navy — para CTAs e destaques) */
  --c-accent: #0d2848;
  --c-accent-hover: #1a3a5c;
  --c-accent-soft: rgba(13, 40, 72, 0.06);
  --c-accent-line: rgba(13, 40, 72, 0.18);

  /* Cor — acento de marca (gold institucional LES — kickers, ênfase, traços técnicos) */
  --c-orange: #f2a93b;
  --c-orange-soft: rgba(242, 169, 59, 0.10);
  --c-orange-line: rgba(242, 169, 59, 0.28);

  /* Cor — variação técnica (cyan do template institucional — títulos secundários, ícones, detalhes) */
  --c-blue-bright: #2e9fe0;
  --c-blue-bright-soft: rgba(46, 159, 224, 0.08);
  --c-blue-bright-line: rgba(46, 159, 224, 0.24);

  /* Cor — alerta (amarelo segurança ABNT — uso restrito a avisos críticos) */
  --c-warn: #f5b800;

  /* Cor — segurança/EPI (laranja ABNT — uso restrito a sinalização SSMA) */
  --c-safety: #ff6b00;

  /* Tipografia */
  --f-display: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, monospace;

  /* Escala tipográfica fluida */
  --fs-micro: clamp(0.6875rem, 0.65rem + 0.2vw, 0.75rem);
  --fs-small: clamp(0.8125rem, 0.78rem + 0.2vw, 0.875rem);
  --fs-body: clamp(0.9375rem, 0.9rem + 0.3vw, 1.0625rem);
  --fs-lead: clamp(1.0625rem, 1rem + 0.5vw, 1.25rem);
  --fs-h3: clamp(1.25rem, 1.1rem + 0.8vw, 1.625rem);
  --fs-h2: clamp(1.75rem, 1.4rem + 1.6vw, 2.5rem);
  --fs-h1: clamp(2.5rem, 1.8rem + 3.2vw, 4.5rem);
  --fs-display: clamp(3.5rem, 2.4rem + 4.8vw, 6rem);

  /* Espaçamento (escala 4pt) */
  --s-1: 0.25rem;
  --s-2: 0.5rem;
  --s-3: 0.75rem;
  --s-4: 1rem;
  --s-5: 1.5rem;
  --s-6: 2rem;
  --s-7: 3rem;
  --s-8: 4rem;
  --s-9: 6rem;
  --s-10: 8rem;
  --s-11: 12rem;

  /* Layout */
  --container-max: 1320px;
  --container-px: clamp(1rem, 4vw, 3rem);
  --header-h: 76px;

  /* Bordas e radius */
  --radius-sm: 2px;
  --radius-md: 4px;
  --radius-lg: 8px;

  /* Linhas técnicas (hairlines) */
  --line-thin: 1px solid var(--c-border);
  --line-soft: 1px solid var(--c-border-soft);
  --line-strong: 1px solid var(--c-border-strong);

  /* Transições */
  --t-fast: 120ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-med: 240ms cubic-bezier(0.4, 0, 0.2, 1);
  --t-slow: 480ms cubic-bezier(0.4, 0, 0.2, 1);

  /* Sombras (sutis, técnicas) */
  --shadow-sm: 0 1px 2px rgba(10, 31, 60, 0.05);
  --shadow-md: 0 6px 20px rgba(10, 31, 60, 0.08);
  --shadow-lg: 0 16px 48px rgba(10, 31, 60, 0.12);
}

/* ---- RESET ---- */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-rendering: optimizeLegibility;
  scroll-padding-top: var(--header-h);
}

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.6;
  font-weight: 400;
  font-feature-settings: "ss01", "cv02", "cv11";
  min-height: 100vh;
  overflow-x: hidden;
}

img,
svg,
video {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--t-fast);
}

button {
  font: inherit;
  border: none;
  background: none;
  cursor: pointer;
  color: inherit;
}

input,
textarea,
select {
  font: inherit;
  color: inherit;
}

ul,
ol {
  list-style: none;
}

/* ---- TIPOGRAFIA BASE ---- */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--f-display);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  text-wrap: balance;
  color: var(--c-fg);
}

h1 {
  font-size: var(--fs-h1);
  letter-spacing: -0.035em;
  font-weight: 800;
}

h2 {
  font-size: var(--fs-h2);
  letter-spacing: -0.025em;
  font-weight: 800;
}

h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  letter-spacing: -0.015em;
}

p {
  text-wrap: pretty;
  max-width: 70ch;
}

p + p {
  margin-top: var(--s-4);
}

strong {
  font-weight: 700;
  color: var(--c-fg);
}

em {
  font-style: normal;
  color: var(--c-orange);
}

::selection {
  background: var(--c-navy);
  color: #fff;
}

/* ---- LAYOUT PRIMITIVES ---- */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-px);
}

.container-narrow {
  width: 100%;
  max-width: 880px;
  margin-inline: auto;
  padding-inline: var(--container-px);
}

section {
  padding-block: clamp(var(--s-8), 9vw, var(--s-10));
  position: relative;
}

section + section {
  border-top: var(--line-thin);
}

/* Section kicker (mono — único elemento que mantém a feel técnica) */
.section-kicker {
  display: inline-flex;
  align-items: center;
  gap: var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-orange);
  margin-bottom: var(--s-5);
}

.section-kicker::before {
  content: "";
  width: var(--s-7);
  height: 2px;
  background: var(--c-orange);
}

.section-kicker--muted {
  color: var(--c-fg-muted);
}

.section-kicker--muted::before {
  background: var(--c-fg-muted);
}

/* Variante cyan — para seções técnicas/secundárias (estilo "PROGRESS REPORT" do template) */
.section-kicker--bright {
  color: var(--c-blue-bright);
}

.section-kicker--bright::before {
  background: var(--c-blue-bright);
}

/* Utilitários de cor (uso parcimonioso em headings ou destaques específicos) */
.text-bright {
  color: var(--c-blue-bright);
}

.text-gold {
  color: var(--c-orange);
}

.eyebrow {
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}

/* Section heading helpers */
.section-heading {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  margin-bottom: var(--s-7);
  max-width: 60ch;
}

.section-heading p {
  color: var(--c-fg-muted);
  font-size: var(--fs-lead);
}

/* Tag/badge técnica */
.tag {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  padding: var(--s-1) var(--s-3);
  font-family: var(--f-mono);
  font-size: var(--fs-micro);
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
  border: var(--line-thin);
  border-radius: var(--radius-sm);
  background: var(--c-bg-soft);
}

/* ---- ACESSIBILIDADE ---- */
:focus-visible {
  outline: 2px solid var(--c-orange);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  top: -100px;
  left: var(--s-4);
  background: var(--c-navy);
  color: #fff;
  padding: var(--s-3) var(--s-5);
  font-weight: 600;
  font-size: var(--fs-small);
  z-index: 9999;
  transition: top var(--t-med);
}

.skip-link:focus {
  top: var(--s-4);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}