/* =========================================================================
   W3M Design System — colors & type tokens (REBRANDING 2026 v2)
   ========================================================================= */

/* @import do Google Fonts removido em 24/09/2026: bloqueava a renderização e baixava as fontes em dobro.
   As páginas carregam as fontes sem bloquear (build-site.js). */

:root {
  /* ---------- BASE (estrutura — preto #161616 = TEXTO principal; navy #041221 = FUNDOS escuros, dark mode, ícones) ---------- */
  --w3m-black:         #161616; /* TEXTO principal (leitura); navy é o escuro de fundos */
  --w3m-white:         #FFFFFF; /* BASE — fundo claro, cards */
  --w3m-black-900:     #0B0B0B; /* page bg dark profundo */
  --w3m-ink:           #1E1E1E; /* alt dark (texto corrido) */
  --w3m-graphite:      #2A2A2A; /* superfície de card no dark */
  --w3m-graphite-2:    #3A3A3A; /* borda no dark */

  /* ---------- PRIMÁRIA (marca: acentos e blocos de cor — proporção lime > navy > roxo > azul) ---------- */
  --w3m-lime:          #DEFB00; /* PRIMÁRIA predominante — CTAs, destaques, fundo de logo */
  --w3m-lime-200:      #EFFF77; /* tint — realces, hovers leves */
  --w3m-lime-100:      #F7FFB8; /* tint clara — tonal buttons, chips, washes */
  --w3m-lime-50:       #FBFFE0; /* wash sutil (derivada) */
  --w3m-lime-600:      #C6E000; /* hover / pressed (derivada) */

  --w3m-purple:        #7543FF; /* PRIMÁRIA de apoio — acentos, dados, gráficos */
  --w3m-purple-300:    #A281FF; /* tint do roxo */
  --w3m-navy:          #041221; /* PRIMÁRIA de apoio — fundos premium, texto sobre lime */
  --w3m-navy-300:      #435669; /* tint do navy (slate) */
  --w3m-blue:          #00126E; /* PRIMÁRIA pontual — blocos editoriais */
  --w3m-blue-300:      #5165CA; /* tint do azul */

  /* Neutro — Cinza (escala 2026 v2) */
  --w3m-gray-50:       #F9FAFB;
  --w3m-gray-100:      #F3F4F6;
  --w3m-gray-200:      #E5E7EB;
  --w3m-gray-300:      #D2D5DA;
  --w3m-gray-400:      #818894; /* mid neutral do Figma — texto terciário, hex labels */
  --w3m-gray:          #818894;
  --w3m-gray-500:      #818894;
  --w3m-gray-700:      #435669; /* texto secundário (= navy-300) */
  --w3m-off-white:     #F9FAFB;

  /* ---------- Aliases legado (amarelo 2026 v1 → lime v2) ---------- */
  --w3m-yellow:        var(--w3m-lime);
  --w3m-yellow-600:    var(--w3m-lime-600);
  --w3m-yellow-300:    var(--w3m-lime-200);
  --w3m-yellow-200:    var(--w3m-lime-200);
  --w3m-yellow-100:    var(--w3m-lime-100);
  --w3m-yellow-50:     var(--w3m-lime-50);
  --w3m-cyan:          #60E1E0; /* LEGADO 2024 — não usar */

  /* ---------- Semantic states (afinados em oklch pro DNA frio da paleta 2026) ---------- */
  --w3m-success:       #00A37A;
  --w3m-warning:       #DE7C00;
  --w3m-danger:        #E0233C;
  --w3m-info:          #041221; /* Info usa navy + ícone — sem cor dedicada */

  /* ---------- Semantic surface / text (light theme defaults) ---------- */
  --bg:                var(--w3m-off-white);
  --bg-elev:           var(--w3m-white);
  --bg-inverse:        var(--w3m-navy);
  --surface:           var(--w3m-white);
  --surface-2:         var(--w3m-gray-100);
  --surface-3:         var(--w3m-gray-200);

  --fg:                var(--w3m-black);
  --fg-1:              var(--w3m-black);     /* primary text */
  --fg-2:              var(--w3m-gray-700);  /* secondary text */
  --fg-3:              var(--w3m-gray-500);  /* tertiary / meta */
  --fg-inverse:        var(--w3m-white);
  --fg-accent:         var(--w3m-lime);

  --border:            var(--w3m-gray-200);
  --border-strong:     var(--w3m-gray-300);
  --border-on-dark:    var(--w3m-graphite-2);

  /* ---------- Typography (2026 v2 — Hanken Grotesk única família) ---------- */
  --font-display:      'Hanken Grotesk', 'Hanken Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif; /* títulos */
  --font-sans:         'Hanken Grotesk', 'Hanken Fallback', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --font-aux:          'Hanken Grotesk', 'Hanken Fallback', system-ui, sans-serif; /* textos / corpo */
  --font-mono:         'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Escala editorial 2026 v2 (do Figma): Título 66/52/40 · Corpo 32/24/18 · Nota 14 · Legal 12 — tudo Hanken Grotesk */
  --fs-titulo-1:       66px;
  --fs-titulo-2:       52px;
  --fs-titulo-3:       40px;
  --fs-corpo-grande:   32px;
  --fs-corpo:          24px;
  --fs-corpo-pequeno:  18px;
  --fs-nota:           14px;
  --fs-legal:          12px;

  /* Type scale — display e body na mesma família, pesos diferenciam */
  --fs-display-xl:     clamp(56px, 8vw, 112px); /* @kind font */
  --fs-display-lg:     clamp(40px, 5vw, 72px); /* @kind font */
  --fs-display-md:     clamp(32px, 4vw, 56px); /* @kind font */

  --fs-h1:             48px;
  --fs-h2:             36px;
  --fs-h3:             28px;
  --fs-h4:             22px;
  --fs-h5:             18px;
  --fs-h6:             16px;

  --fs-body-lg:        18px;
  --fs-body:           16px;
  --fs-body-sm:        14px;
  --fs-caption:        12px;
  --fs-overline:       11px;

  --lh-tight:          1.05; /* @kind font */
  --lh-snug:           1.2; /* @kind font */
  --lh-normal:         1.5; /* @kind font */
  --lh-relaxed:        1.65; /* @kind font */

  --tracking-tight:    -0.02em; /* @kind font */
  --tracking-normal:   0; /* @kind font */
  --tracking-wide:     0.08em; /* @kind font */
  --tracking-widest:   0.18em; /* @kind font */

  --weight-light:      300; /* @kind font */
  --weight-regular:    400; /* @kind font */
  --weight-medium:     500; /* @kind font */
  --weight-semibold:   600; /* @kind font */
  /* bold = 600, máx. da marca (Figma v2); black = 700, exceção técnica */
  --weight-bold:       600; /* @kind font */
  --weight-black:      700; /* @kind font */

  /* ---------- Radii (medium rounded) ---------- */
  --radius-xs:         4px;
  --radius-sm:         8px;
  --radius-md:         12px;   /* default for inputs, chips */
  --radius-lg:         16px;   /* default for cards */
  --radius-xl:         24px;   /* hero cards, modals */
  --radius-2xl:        32px;
  --radius-pill:       999px;

  /* ---------- Spacing ---------- */
  --space-1:           4px;
  --space-2:           8px;
  --space-3:           12px;
  --space-4:           16px;
  --space-5:           20px;
  --space-6:           24px;
  --space-8:           32px;
  --space-10:          40px;
  --space-12:          48px;
  --space-16:          64px;
  --space-20:          80px;
  --space-24:          96px;
  --space-32:          128px;

  /* ---------- Shadow / elevation (base rgba(16,24,40) — 2026) ---------- */
  /* ---------- LISTRAS DO W (padrão gráfico — vão FIXO por aplicação; listra = flex:1, nunca largura fixa) ---------- */
  --stripe-gap-hero:      14px;  /* capa/hero fullscreen (1920/slide) */
  --stripe-gap-doc:       10px;  /* capa A4 / documento */
  --stripe-gap-corner:    8px;   /* canto de slide */
  --stripe-gap-progress:  7px;   /* barra de progresso/etapas */
  --stripe-gap-divider:   6px;   /* divisor e clipe de imagem */
  --stripe-gap-bullet:    2.5px; /* marcador de lista */
  --stripe-gap-watermark: 16px;  /* watermark tom-sobre-tom */
  --stripe-skew:          -18deg; /* @kind other */

  --shadow-xs:         0 1px 2px rgba(16, 24, 40, 0.06);
  --shadow-sm:         0 2px 6px rgba(16, 24, 40, 0.06), 0 1px 2px rgba(16, 24, 40, 0.04);
  --shadow-md:         0 12px 16px -4px rgba(16, 24, 40, 0.10), 0 4px 6px -2px rgba(16, 24, 40, 0.05); /* sombra oficial dos cards */
  --shadow-lg:         0 18px 48px rgba(16, 24, 40, 0.12), 0 6px 12px rgba(16, 24, 40, 0.06);
  --shadow-xl:         0 32px 80px rgba(16, 24, 40, 0.18);
  --shadow-glow-lime:  0 0 0 4px rgba(222, 251, 0, 0.35);
  --shadow-glow-yellow:0 0 0 4px rgba(222, 251, 0, 0.35); /* alias legado */
  --shadow-inset:      inset 0 1px 0 rgba(255,255,255,0.06);

  /* ---------- Motion ---------- */
  --ease-out:          cubic-bezier(0.22, 1, 0.36, 1); /* @kind other */
  --ease-in-out:       cubic-bezier(0.65, 0, 0.35, 1); /* @kind other */
  --ease-spring:       cubic-bezier(0.34, 1.56, 0.64, 1); /* @kind other */
  --dur-fast:          120ms; /* @kind other */
  --dur:               200ms; /* @kind other */
  --dur-slow:          360ms; /* @kind other */

  /* ---------- Layout ---------- */
  --container:         1240px; /* @kind spacing */
  --container-narrow:  920px; /* @kind spacing */
  --gutter:            clamp(20px, 4vw, 48px); /* @kind spacing */
}

/* =========================================================================
   Semantic element styles
   ========================================================================= */

html, body {
  background: var(--bg);
  color: var(--fg-1);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: var(--lh-normal);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6,
.w3m-h1, .w3m-h2, .w3m-h3, .w3m-h4, .w3m-h5, .w3m-h6 {
  font-family: var(--font-display);
  color: var(--fg-1);
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
  font-weight: var(--weight-semibold);
  margin: 0;
  text-wrap: balance;
}

.w3m-display-xl, h1.display { font-size: var(--fs-display-xl); line-height: var(--lh-tight); font-weight: var(--weight-bold); letter-spacing: -0.03em; }
.w3m-display-lg            { font-size: var(--fs-display-lg); line-height: var(--lh-tight); font-weight: var(--weight-bold); letter-spacing: -0.025em; }
.w3m-display-md            { font-size: var(--fs-display-md); line-height: var(--lh-snug);  font-weight: var(--weight-semibold); letter-spacing: -0.02em; }

h1, .w3m-h1 { font-size: var(--fs-h1); font-weight: var(--weight-bold); }
h2, .w3m-h2 { font-size: var(--fs-h2); }
h3, .w3m-h3 { font-size: var(--fs-h3); }
h4, .w3m-h4 { font-size: var(--fs-h4); }
h5, .w3m-h5 { font-size: var(--fs-h5); font-weight: var(--weight-medium); }
h6, .w3m-h6 { font-size: var(--fs-h6); font-weight: var(--weight-medium); }

p, .w3m-p {
  font-family: var(--font-aux);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  color: var(--fg-2);
  margin: 0;
  text-wrap: pretty;
}

.w3m-lead { font-size: var(--fs-body-lg); line-height: var(--lh-relaxed); color: var(--fg-1); }
.w3m-small { font-size: var(--fs-body-sm); }
.w3m-caption { font-size: var(--fs-caption); color: var(--fg-3); }

.w3m-overline {
  font-family: var(--font-display);
  font-size: var(--fs-overline);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-widest);
  text-transform: uppercase;
  color: var(--fg-2);
}

code, kbd, samp, .w3m-mono {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

a {
  color: var(--fg-1);
  text-decoration: none;
  border-bottom: 1px solid currentColor;
  transition: color var(--dur) var(--ease-out), border-color var(--dur) var(--ease-out);
}
a:hover { color: var(--w3m-lime-600); border-color: var(--w3m-lime); }

/* Dark surface utility */
.w3m-on-dark {
  background: var(--w3m-navy);
  color: var(--w3m-white);
}
.w3m-on-dark p, .w3m-on-dark .w3m-p { color: rgba(255,255,255,0.72); }
.w3m-on-dark h1, .w3m-on-dark h2, .w3m-on-dark h3, .w3m-on-dark h4, .w3m-on-dark h5, .w3m-on-dark h6 { color: var(--w3m-white); }

/* Lime accent text */
.w3m-accent { color: var(--w3m-lime); }
.w3m-highlight {
  background: linear-gradient(180deg, transparent 60%, var(--w3m-lime) 60%);
  padding: 0 0.08em;
}