/* =============================================
   DecodeGear V8 — Base
   Reset, tipografia, links, forms, buttons, tables, containers.
   Fonte: docs/restructure/43-design-system-v8.md
   ============================================= */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; overflow-x: hidden; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  font-family: var(--dg-font-body);
  font-size: var(--dg-text-base);
  line-height: var(--dg-leading-normal);
  color: var(--dg-text);
  background: var(--dg-bg);
  -webkit-font-smoothing: antialiased;
  /* NÃO adicionar overflow-x aqui: testado em runtime (Etapa 4C) e overflow-x:hidden
     no body quebra o .dg-header { position: sticky; } (body vira scroll container
     próprio e o sticky deixa de calcular contra a viewport). A rede de segurança
     contra o overflow do drawer fechado fica só em `html` (ver acima). */
}

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

/* ---- Headings ---- */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--dg-font-heading);
  line-height: var(--dg-leading-tight);
  color: var(--dg-text);
  margin: 0 0 var(--dg-space-4);
  font-weight: 700;
}
h1 { font-size: var(--dg-text-3xl); }
h2 { font-size: var(--dg-text-2xl); margin-top: var(--dg-space-7); }
h3 {
  font-size: var(--dg-text-xl);
  font-family: var(--dg-font-body); /* H3 usa body font em peso 700 — ver 43-design-system-v8.md §Tipografia (reduz 1 requisição de peso de fonte) */
  margin-top: var(--dg-space-6);
}
@media (min-width: 768px) {
  h1 { font-size: var(--dg-text-4xl); }
}

p { margin: 0 0 var(--dg-space-4); }

/* ---- Links ---- */
a {
  color: var(--dg-link);
  text-decoration: var(--dg-link-decoration);
  text-decoration-thickness: var(--dg-link-decoration-thickness);
  text-underline-offset: var(--dg-link-underline-offset);
}
a:visited { color: var(--dg-link-visited); }
a:hover { color: var(--dg-accent); }

/* ---- Lists ---- */
ul, ol { padding-left: 1.4em; margin: 0 0 var(--dg-space-4); }
li { margin-bottom: var(--dg-space-2); }

/* ---- Figures / captions ---- */
figure { margin: var(--dg-space-6) 0; }
figcaption {
  font-size: var(--dg-text-sm);
  color: var(--dg-text-muted);
  margin-top: var(--dg-space-2);
}

/* ---- Blockquote ---- */
blockquote {
  margin: var(--dg-space-6) 0;
  padding: var(--dg-space-4) var(--dg-space-5);
  border-left: var(--dg-border-w-2, 2px) solid var(--dg-accent);
  background: var(--dg-surface);
  border-radius: 0 var(--radius-md) var(--radius-md) 0;
  color: var(--dg-text-muted);
  font-style: italic;
}

/* ---- Forms ---- */
input, select, textarea, button {
  font-family: inherit;
  font-size: var(--dg-text-base); /* nunca <16px — evita zoom automático no iOS */
}
input[type="text"], input[type="search"], input[type="email"], textarea, select {
  background: var(--dg-input-bg);
  border: var(--dg-border-w, 1px) solid var(--dg-input-border);
  border-radius: var(--dg-input-radius);
  padding: var(--dg-space-3) var(--dg-space-4);
  color: var(--dg-text);
  width: 100%;
}
input:focus, select:focus, textarea:focus {
  border-color: var(--dg-input-focus-border);
  outline: none;
  box-shadow: var(--dg-focus-ring);
}
label { display: block; font-size: var(--dg-text-sm); margin-bottom: var(--dg-space-2); color: var(--dg-text-muted); }

/* ---- Buttons ---- */
.dg-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--dg-space-2);
  font-weight: 600;
  font-size: var(--dg-text-base);
  padding: var(--dg-space-3) var(--dg-space-5);
  border-radius: var(--dg-button-primary-radius);
  border: var(--dg-border-w, 1px) solid transparent;
  cursor: pointer;
  text-decoration: none;
  min-height: 44px; /* touch target — 45-accessibility-checklist.md */
  transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
}
.dg-btn--primary {
  background: var(--dg-button-primary-bg);
  color: var(--dg-button-primary-text);
}
.dg-btn--primary:hover { background: var(--dg-accent-hover); color: var(--dg-button-primary-text); text-decoration: none; }
.dg-btn--secondary {
  background: var(--dg-button-secondary-bg);
  color: var(--dg-text);
  border-color: var(--dg-button-secondary-border);
}
.dg-btn--secondary:hover { border-color: var(--dg-accent); text-decoration: none; }
.dg-btn:active { transform: translateY(1px); }

/* ---- Tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--dg-text-sm);
}
th, td {
  padding: var(--dg-space-3) var(--dg-space-4);
  border-bottom: var(--dg-border-w, 1px) solid var(--dg-table-border);
  text-align: left;
}
thead th {
  background: var(--dg-table-header-bg);
  font-family: var(--dg-font-heading);
  font-weight: 700;
}
tbody tr:nth-child(even) { background: var(--dg-table-row-alt-bg); }

/* Wrapper obrigatório para toda tabela dentro de conteúdo editorial — nunca a
   página inteira ganha scroll horizontal (ver 50-visual-regression-matrix.md §Overflow). */
.dg-table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border: var(--dg-border-w, 1px) solid var(--dg-border);
  border-radius: var(--radius-md);
}
.dg-table-scroll table { border: none; }

/* ---- Badges (TOPIC vs CONTENT TYPE — 43-design-system-v8.md) ---- */
.dg-badge {
  display: inline-flex;
  align-items: center;
  font-size: var(--dg-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  padding: var(--dg-space-1) var(--dg-space-3);
  border-radius: var(--radius-full);
  line-height: 1.4;
}
.dg-badge--topic {
  background: var(--dg-badge-topic-bg);
  color: var(--dg-badge-topic-text);
}
.dg-badge--type {
  background: var(--dg-badge-type-bg);
  color: var(--dg-badge-type-text);
  border: var(--dg-border-w, 1px) solid var(--dg-badge-type-border);
}

/* ---- Containers (seção 6 — shell/landing/article/narrow) ---- */
.dg-container-shell,
.dg-container-landing,
.dg-container-article,
.dg-container-narrow { width: 100%; }