/*
 * Zigg 2026 — Base styles
 * Reset + typography + a11y primitives.
 * Carregado em todas as páginas.
 */

/* ============================================================
   Reset
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html {
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body {
  font-family: var(--f-sans);
  font-size: 17px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  font-feature-settings: "ss01", "ss02", "cv01";
}
img, svg, video, picture { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
hr { border: 0; border-top: 1px solid var(--rule); margin: 0; }
/* Forçar sans-serif em interactive elements — alguns plugins (RankMath, LSCache critical CSS)
   injetam font-family em tags genéricas e contaminam botões. Reset defensivo. */
button, input, textarea, select, optgroup {
  font-family: var(--f-sans);
  font-style: normal;
  font-size: inherit;
  cursor: pointer;
}
button:not([disabled]) { cursor: pointer; }
input:not([type="submit"]):not([type="button"]) { cursor: text; }

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

/* ============================================================
   Typography
   ============================================================ */
h1, h2, h3, h4 { margin: 0; line-height: 1.05; letter-spacing: -.02em; font-weight: 500; }
h1 { font-size: clamp(56px, 9vw, 128px); letter-spacing: -.035em; }
h2 { font-size: clamp(40px, 5.5vw, 76px); letter-spacing: -.028em; font-weight: 500; }
h3 { font-size: clamp(26px, 2.6vw, 36px); letter-spacing: -.02em; }
h4 { font-size: 20px; letter-spacing: -.01em; }

.display { font-family: var(--f-display); font-weight: 400; letter-spacing: -.01em; }
.display em { font-style: italic; }

p { margin: 0; }
.lead { font-size: clamp(20px, 1.8vw, 26px); line-height: 1.4; color: var(--ink-2); max-width: 38ch; letter-spacing: -.01em; }
.body-l { font-size: 19px; line-height: 1.55; color: var(--ink-2); }
.muted { color: var(--mute); }
.mono { font-family: var(--f-mono); font-size: 13px; letter-spacing: .01em; }
.eyebrow {
  font-family: var(--f-mono);
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mute);
  display: inline-flex; align-items: baseline; gap: 12px;
}
.eyebrow .num { color: var(--ember); font-weight: 500; }

/* ============================================================
   A11y primitives
   ============================================================ */
.screen-reader-text {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -100px; left: 0;
  background: var(--ink); color: var(--paper);
  padding: 12px 18px;
  z-index: var(--z-toast);
  font-family: var(--f-mono); font-size: 12px;
  letter-spacing: .04em;
  text-transform: uppercase;
  transition: top 0.2s var(--ease);
}
.skip-link:focus { top: 0; outline: 3px solid var(--ember); outline-offset: 2px; }

/* focus-visible global */
:focus { outline: none; }
:focus-visible {
  outline: 2px solid var(--ember);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ============================================================
   Forms
   ============================================================ */
input, textarea, select {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 10px 14px;
}
input:focus-visible, textarea:focus-visible, select:focus-visible {
  border-color: var(--ember);
  outline: none;
}

/* ============================================================
   Code / inline
   ============================================================ */
code, kbd, samp, pre {
  font-family: var(--f-mono);
  font-size: 0.92em;
}
code {
  background: var(--paper-2);
  padding: 2px 6px;
  border-radius: 4px;
}
kbd {
  border: 1px solid var(--rule-2);
  border-radius: 4px;
  padding: 2px 6px;
  background: var(--paper);
  font-size: 11px;
}

/* ============================================================
   Image placeholders / loading
   ============================================================ */
img[loading="lazy"] { background: var(--paper-2); }
.imgph {
  background:
    linear-gradient(135deg, transparent 49.5%, var(--rule-2) 49.5% 50.5%, transparent 50.5%) 0 0/24px 24px,
    linear-gradient(45deg, transparent 49.5%, var(--rule-2) 49.5% 50.5%, transparent 50.5%) 0 0/24px 24px,
    var(--paper-3);
  border-radius: var(--radius);
}