@layer reset, tokens, base, layout, components, motion, utils;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; }
  body { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
  img, picture, video, svg { display: block; max-width: 100%; }
  input, button, textarea, select { font: inherit; color: inherit; }
  button { background: none; border: 0; cursor: pointer; }
  h1, h2, h3, h4, p { overflow-wrap: break-word; text-wrap: pretty; }
  h1, h2, h3 { text-wrap: balance; }
  ul[class] { list-style: none; padding: 0; }
  :where(a) { color: inherit; }
  [hidden] { display: none !important; }   /* vence os display: grid/flex dos componentes */
}

@layer base {
  /* a nav é fixa: sem esta reserva todo salto interno entrega o destino
     com os primeiros 72px escondidos atrás dela. */
  html { scroll-behavior: smooth; scroll-padding-block-start: calc(var(--nav-h) + 1rem); }
  @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

  body {
    font-family: var(--f-sans);
    font-size: var(--t-body);
    font-weight: 400;
    line-height: 1.62;
    color: var(--tx-body);
    background: var(--bone);
    overflow-x: clip;
  }

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

  :focus-visible {
    outline: 2px solid var(--ember-tx);
    outline-offset: 3px;
    border-radius: 2px;
  }

  /* ---------- Tipografia ---------- */
  .display {
    font-size: var(--t-display);
    font-weight: 300;
    line-height: .95;
    letter-spacing: -.034em;
    color: var(--tx-strong);
  }
  .h2 {
    font-size: var(--t-h2);
    font-weight: 300;
    line-height: 1.02;
    letter-spacing: -.028em;
    color: var(--tx-strong);
  }
  .h3 {
    font-size: var(--t-h3);
    font-weight: 400;
    line-height: 1.15;
    letter-spacing: -.018em;
    color: var(--tx-strong);
  }
  .lead {
    font-size: var(--t-lead);
    line-height: 1.5;
    font-weight: 300;
    letter-spacing: -.006em;
  }
  .label {
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: .2em;
    text-transform: uppercase;
    line-height: 1;
    color: var(--tx-mute);
  }
  /* rótulo de seção não é clicável: laranja aqui prometia um clique que
     não existe, e ainda reprovava em contraste sobre fundo claro. */
  .label--accent { color: var(--tx-strong); }
  .label > .dot {
    display: inline-block;
    inline-size: .34em; block-size: .34em;
    background: var(--ember);
    border-radius: 50%;
    margin-inline-end: .85em;
    vertical-align: .22em;
  }
  .num {
    font-variant-numeric: tabular-nums lining-nums;
    font-feature-settings: "tnum" 1;
  }

  /* ---------- Superfícies ---------- */
  .on-dark {
    background: var(--ink);
    color: var(--tx-on-dark-mute);
    --tx-strong: var(--white);
    --tx-body: var(--tx-on-dark-mute);
    /* sobre o preto, o laranja escuro cai para 3,13:1; o aberto dá 4,91 */
    --ember-tx: var(--ember-open);
    --tx-mute: var(--tx-on-dark-mute);
    --rule: var(--rule-dark);
  }
  .on-charcoal { background: var(--charcoal); }

  /* grão sutil sobre superfícies escuras */
  .on-dark { position: relative; }
  .on-dark::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    opacity: .035; mix-blend-mode: overlay; z-index: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  }
  .on-dark > * { position: relative; z-index: 1; }
}

@layer layout {
  .shell {
    inline-size: min(100% - (var(--pad-x) * 2), var(--maxw));
    margin-inline: auto;
  }
  .shell--wide { inline-size: min(100% - (var(--pad-x) * 2), 118rem); margin-inline: auto; }
  .section { padding-block: var(--sec-y); }
  /* O hero fica sticky atrás do conteúdo. Sem fundo próprio, a seção clara
     é transparente e deixa o hero aparecer através dela — o fundo do body
     não sobe junto. --bone é esse mesmo fundo, e é contra ele que os tokens
     de texto foram calibrados. As escuras ficam de fora: .on-dark vive na
     camada `base`, anterior a esta, e seria sobrescrita. */
  .section:not(.on-dark) { background: var(--bone); }
  .section--tight { padding-block: clamp(3.5rem, 1.5rem + 6vw, 7rem); }
  .bleed { inline-size: 100%; }

  .grid { display: grid; gap: var(--gap); }
  .cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  @media (max-width: 62rem) { .cols-3, .cols-4 { grid-template-columns: repeat(2, minmax(0,1fr)); } }
  @media (max-width: 40rem) { .cols-2, .cols-3, .cols-4 { grid-template-columns: minmax(0,1fr); } }

  /* cabeçalho de seção: rótulo à esquerda, conteúdo à direita */
  .sechead {
    display: grid;
    grid-template-columns: minmax(0, 14rem) minmax(0, 1fr);
    gap: var(--gap);
    align-items: start;
    padding-block-end: clamp(2rem, 1rem + 3vw, 4rem);
  }
  .sechead__body { display: grid; gap: 1.15rem; }
  .sechead__body > .h2 { max-inline-size: 19ch; }
  .sechead__body > .lead, .sechead__body > p { max-inline-size: 50ch; }
  @media (max-width: 55rem) {
    .sechead { grid-template-columns: minmax(0,1fr); gap: 1.5rem; }
  }

  .rule { block-size: 1px; background: var(--rule); border: 0; }
}