/* ==========================================================================
   PEGORETH & ROAS — FOUNDATIONS
   Camada 2 de 3.  tokens.css → base.css → components.css
   Reset, tipografia, grid, utilitários e acessibilidade.
   Nenhum valor bruto: tudo vem de tokens.css.
   ========================================================================== */

/* -------------------------------------------------- 1. RESET */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: var(--sp-10);
}

body {
  margin: 0;
  background: var(--c-background-primary);
  color: var(--c-text-primary);
  font-family: var(--f-sans);
  font-size: var(--t-body-size);
  line-height: var(--t-body-lh);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, dl, dd { margin: 0; }
ul[class], ol[class] { list-style: none; margin: 0; padding: 0; }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; padding: 0; cursor: pointer; }

table { border-collapse: collapse; width: 100%; }

hr { border: 0; border-top: 1px solid var(--c-border-subtle); margin: var(--sp-7) 0; }

::selection { background: var(--c-surface-accent-soft); color: var(--c-text-primary); }


/* -------------------------------------------------- 2. TIPOGRAFIA */

.t-display, .t-h1, .t-h2, .t-h3 {
  font-family: var(--f-serif);
  font-optical-sizing: auto;
  color: var(--c-text-primary);
  text-wrap: balance;
}

.t-display {
  font-size: var(--t-display-size);
  line-height: var(--t-display-lh);
  letter-spacing: var(--t-display-ls);
  font-weight: var(--t-display-weight);
}
.t-h1 {
  font-size: var(--t-h1-size);
  line-height: var(--t-h1-lh);
  letter-spacing: var(--t-h1-ls);
  font-weight: var(--t-h1-weight);
}
.t-h2 {
  font-size: var(--t-h2-size);
  line-height: var(--t-h2-lh);
  letter-spacing: var(--t-h2-ls);
  font-weight: var(--t-h2-weight);
}
.t-h3 {
  font-size: var(--t-h3-size);
  line-height: var(--t-h3-lh);
  letter-spacing: var(--t-h3-ls);
  font-weight: var(--t-h3-weight);
}
.t-h4 {
  font-family: var(--f-sans);
  font-size: var(--t-h4-size);
  line-height: var(--t-h4-lh);
  font-weight: var(--t-h4-weight);
  color: var(--c-text-primary);
}

.t-body-lg { font-size: var(--t-body-lg-size); line-height: var(--t-body-lg-lh); }
.t-body    { font-size: var(--t-body-size);    line-height: var(--t-body-lh); }
.t-body-sm { font-size: var(--t-body-sm-size); line-height: var(--t-body-sm-lh); }
.t-caption { font-size: var(--t-caption-size); line-height: var(--t-caption-lh); color: var(--c-text-muted); }

/* Eyebrow — rótulo mono em caixa alta. Assinatura tipográfica da marca. */
.t-eyebrow {
  font-family: var(--f-mono);
  font-size: var(--t-eyebrow-size);
  line-height: var(--t-eyebrow-lh);
  letter-spacing: var(--t-eyebrow-ls);
  font-weight: var(--t-eyebrow-weight);
  text-transform: uppercase;
  color: var(--c-text-secondary);
}

.t-label {
  font-family: var(--f-sans);
  font-size: var(--t-label-size);
  font-weight: var(--t-label-weight);
  letter-spacing: var(--t-label-ls);
  color: var(--c-text-primary);
}

.t-quote {
  font-family: var(--f-serif);
  font-size: var(--t-quote-size);
  line-height: var(--t-quote-lh);
  font-weight: 300;
  font-style: italic;
}

.t-code, code, kbd, samp, pre {
  font-family: var(--f-mono);
  font-size: var(--t-code-size);
  line-height: var(--t-code-lh);
}

/* Modificadores de cor */
.t-muted     { color: var(--c-text-muted); }
.t-secondary { color: var(--c-text-secondary); }
.t-accent    { color: var(--c-text-accent); }
.t-inverse   { color: var(--c-text-inverse); }
.t-inverse-muted { color: var(--c-text-inverse-muted); }

/* Ênfase serif em laranja dentro de um título — uso editorial da marca.
   Só válido em texto grande (>=24px), por isso usa o token -large. */
.t-em { color: var(--c-text-accent-large); font-style: normal; }

/* Medida de leitura */
.t-measure    { max-width: var(--layout-text-max); }
.t-measure-sm { max-width: 52ch; }


/* -------------------------------------------------- 3. LINKS */

a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.18em; }

.link {
  color: var(--c-text-accent);
  text-decoration: underline;
  text-decoration-color: color-mix(in srgb, var(--c-text-accent) 40%, transparent);
  transition: text-decoration-color var(--mo-fast) var(--mo-ease);
}
.link:hover { text-decoration-color: currentColor; }

/* Link de texto com seta — padrão de navegação editorial da marca */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-weight: 600;
  font-size: var(--t-body-sm-size);
  text-decoration: none;
  color: var(--c-text-primary);
  border-bottom: 1px solid var(--c-border-strong);
  padding-bottom: var(--sp-1);
  transition: border-color var(--mo-base) var(--mo-ease), gap var(--mo-base) var(--mo-ease);
}
.link-arrow:hover { border-color: var(--c-rule-accent); gap: var(--sp-3); }
.link-arrow--inverse { color: var(--c-text-inverse); border-color: var(--c-border-inverse); }


/* -------------------------------------------------- 4. LAYOUT */

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

.section { padding-block: var(--sp-section); }
.section--tight { padding-block: var(--sp-section-tight); }
.section--sand    { background: var(--c-background-secondary); }
.section--surface { background: var(--c-surface); }
.section--inverse { background: var(--c-background-inverse); color: var(--c-text-inverse); }
.section--inverse .t-display,
.section--inverse .t-h1,
.section--inverse .t-h2,
.section--inverse .t-h3,
.section--inverse .t-h4 { color: var(--c-text-inverse); }
.section--inverse .t-eyebrow { color: var(--c-text-inverse-muted); }

.stack > * + * { margin-top: var(--sp-4); }
.stack-sm > * + * { margin-top: var(--sp-2); }
.stack-lg > * + * { margin-top: var(--sp-6); }

.grid { display: grid; gap: var(--layout-grid-gap); }
.grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.cluster { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; }
.between { display: flex; flex-wrap: wrap; gap: var(--sp-5); align-items: end; justify-content: space-between; }

/* Cabeçalho de seção — eyebrow + régua + título */
.section-head { margin-bottom: var(--sp-8); }

/* A régua curta laranja. Decorativa. */
.rule {
  display: block;
  width: var(--rule-len);
  height: var(--rule-w);
  background: var(--c-rule-accent);
  border: 0;
  margin: 0 0 var(--sp-4);
}
.rule--inline { display: inline-block; vertical-align: middle; margin: 0 var(--sp-4) 0 0; }


/* -------------------------------------------------- 5. ACESSIBILIDADE */

/* Foco visível e consistente. Nunca removido sem substituto. */
:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--c-focus-ring);
  outline-offset: 3px;
  border-radius: var(--r-xs);
}
.section--inverse :where(a, button, input, select, summary):focus-visible {
  outline-color: var(--c-focus-ring-inverse);
}

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

.skip-link {
  position: absolute; left: var(--sp-4); top: var(--sp-4);
  transform: translateY(-200%);
  z-index: var(--z-toast);
  background: var(--c-action-primary);
  color: var(--c-action-primary-text);
  padding: var(--sp-3) var(--sp-5);
  border-radius: var(--r-sm);
  font-weight: 600; text-decoration: none;
  transition: transform var(--mo-base) var(--mo-ease);
}
.skip-link:focus { transform: translateY(0); }

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


/* -------------------------------------------------- 6. UTILITÁRIOS */

.u-center     { text-align: center; }
.u-center-x   { margin-inline: auto; }
.u-hide       { display: none !important; }
.u-full       { width: 100%; }
.u-relative   { position: relative; }
.u-nowrap     { white-space: nowrap; }
.u-pretty     { text-wrap: pretty; }

.u-mt-0 { margin-top: 0; }
.u-mt-2 { margin-top: var(--sp-2); }
.u-mt-4 { margin-top: var(--sp-4); }
.u-mt-6 { margin-top: var(--sp-6); }
.u-mt-8 { margin-top: var(--sp-8); }


/* -------------------------------------------------- 7. RESPONSIVO
   Breakpoints (sincronizados com os tokens --bp-*):
   md 768px · lg 1024px
   Regra: reorganizar hierarquia, não apenas encolher.                      */

@media (max-width: 1023px) {
  .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .grid-2, .grid-3, .grid-4 { grid-template-columns: minmax(0, 1fr); }
  .between { align-items: start; }
  .u-hide-mobile { display: none !important; }
}

@media (min-width: 768px) {
  .u-hide-desktop { display: none !important; }
}

@media print {
  .no-print { display: none !important; }
  body { background: var(--c-print-bg); color: var(--c-print-fg); }
}