/*
  BASE — reset, layout primitives, tipografia, acessibilidade
  Fonte: doc/VISUAL-DIRECTION.md §7, §8, §10, §12.5
*/

@layer reset, base, layout, type, components, motion-base, utilities;

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  body { min-height: 100svh; line-height: 1.5; -webkit-font-smoothing: antialiased; }
  img, picture, video, canvas, svg { display: block; max-width: 100%; }
  /*
    Correção crítica (achada em QA local): os atributos HTML width/height
    (necessários para reservar espaço e evitar CLS antes do CSS carregar)
    viram um "height" presentacional de baixa prioridade. Sem este reset,
    qualquer <img> que receba um "aspect-ratio" próprio no CSS de componente
    ignora a proporção pretendida e usa a altura NATURAL do arquivo original
    (ex.: uma imagem de 1878×1254px ficava 1254px de altura mesmo dentro de
    um cartão com aspect-ratio:3/4) — inflando a altura de quase todas as
    dobras da página. `height:auto` aqui garante que o par
    width:100%+aspect-ratio de cada componente sempre vença.
  */
  img { height: auto; }
  input, button, textarea, select { font: inherit; color: inherit; }
  p, h1, h2, h3, h4 { overflow-wrap: break-word; }
  #root, #__next { isolation: isolate; }
  a { color: inherit; text-decoration: none; }
  button { background: none; border: 0; cursor: pointer; }
  ul, ol { list-style: none; padding: 0; }
}

@layer base {
  html {
    scroll-behavior: auto; /* nunca smooth sem gate de reduced-motion — controlado via JS */
  }
  body {
    background: var(--asfalto);
    color: var(--luz);
    font-family: var(--ff-text);
    font-size: var(--t-body);
    overflow-x: hidden;
  }
  ::selection {
    background: var(--vermelho);
    color: var(--asfalto);
  }

  :focus-visible {
    outline: 2px solid var(--vermelho);
    outline-offset: 3px;
  }

  /* Skip link (§16 item 18 — microcopy "Ir para o conteúdo" pendente de aprovação;
     funcional desde já, texto pode ser trocado sem mudar comportamento) */
  .skip-link {
    position: fixed;
    top: -100%;
    left: var(--space-s);
    z-index: 1000;
    background: var(--vermelho);
    color: var(--asfalto);
    padding: var(--space-2xs) var(--space-s);
    font-family: var(--ff-text);
    font-weight: 600;
    transition: top var(--dur-fast) var(--ease-brake);
  }
  .skip-link:focus {
    top: var(--space-s);
  }
}

@layer layout {
  .container {
    max-width: var(--container-max);
    margin-inline: auto;
    padding-inline: var(--container-margin);
  }

  .grid {
    display: grid;
    gap: var(--container-gutter);
    grid-template-columns: repeat(4, 1fr);
  }
  @media (min-width: 640px) {
    .grid { grid-template-columns: repeat(8, 1fr); }
  }
  @media (min-width: 1024px) {
    .grid { grid-template-columns: repeat(12, 1fr); }
  }

  .section {
    position: relative;
    padding-block: var(--space-2xl);
  }
  .section--breath {
    padding-block: var(--space-3xl);
  }

  /* Alturas de tela cheia: svh para cenas fixas (estável com a barra de
     endereço do mobile), dvh para overlays (acompanha a barra dinâmica) */
  .h-scene { min-height: 100svh; }
  .h-overlay { min-height: 100dvh; }

  /*
    Mudança de registro (só a dobra Bandeiras Empresarial): em vez de uma
    segunda folha de regras "modo claro", os tokens de texto/acento/divisor
    são reatribuídos dentro deste escopo. Todo componente que já lê
    var(--luz)/var(--luz-2)/var(--vermelho)/var(--divisor) — botão, filete,
    legenda, borda — se adapta sozinho, sem CSS duplicado por seção.
  */
  .section--paper {
    background: var(--papel);
    color: var(--tinta);
    --luz: var(--tinta);
    --luz-2: var(--tinta-2);
    --vermelho: var(--vermelho-escuro);
    --divisor: rgba(22, 19, 15, 0.14);
  }
  .section--paper ::selection { background: var(--vermelho-escuro); color: var(--papel); }
}

@layer type {
  h1, h2, h3, h4, h5, .display {
    font-family: var(--ff-display);
    font-weight: 400;
    font-synthesis: none;
    text-wrap: balance;
    text-transform: uppercase;
    letter-spacing: -0.01em;
  }
  /*
    Antes desta regra, h2/h3 "nus" (sem classe própria) caíam no tamanho
    padrão do navegador (2em/1.17em) — muito abaixo da escala fluida usada
    em qualquer título com classe explícita. Resultado: hierarquia
    inconsistente entre seções, exatamente o problema reportado. Agora todo
    título de seção usa a mesma escala por padrão; uma classe específica
    (ex.: .bandeiras__title-b) ainda pode sobrepor quando precisar de mais peso.
  */
  h2 { font-size: var(--t-xl); line-height: 0.98; margin-block-end: var(--space-m); max-width: 20ch; }
  h3 { font-size: var(--t-l); line-height: 1.05; margin-block-end: var(--space-s); }
  /* Statements curtos (1 linha, poucas palavras) merecem o degrau acima —
     aplicado pontualmente via .h2--statement, nunca no H2 padrão de seção. */
  .h2--statement { font-size: var(--t-xxl); line-height: 0.92; max-width: 14ch; }
  .eyebrow {
    display: flex;
    align-items: center;
    gap: var(--space-2xs);
    font-family: var(--ff-text);
    font-size: var(--t-label);
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
  }
  .eyebrow::before {
    content: "";
    display: inline-block;
    width: 20px;
    height: 2px;
    background: var(--vermelho);
    flex-shrink: 0;
  }
  .eyebrow--brand::before {
    display: none;
  }
  .eyebrow__icon {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
  }
  .lead {
    font-size: var(--t-m);
    line-height: 1.4;
    max-width: 64ch;
  }
  p, .body-copy {
    max-width: 60ch;
    line-height: 1.6;
  }
  .num {
    font-family: var(--ff-display);
    font-variant-numeric: tabular-nums;
    font-feature-settings: "tnum";
  }
  .unit {
    font-family: var(--ff-text);
    font-feature-settings: "case";
  }
}

@layer motion-base {
  /*
    Regra central (§12.5): o estado-base do CSS é sempre o estado FINAL,
    visível. Motion é uma camada de cima — nunca um requisito para ler a
    página. Elementos "revelam" só depois que JS adiciona .js-motion ao
    <html> (feature-detect + reduced-motion check) E o elemento entra em
    viewport (.is-in). Sem JS, ou com prefers-reduced-motion, tudo já está
    visível porque a regra abaixo nunca aplica.
  */
  .js-motion [data-reveal] {
    opacity: 0;
    transform: translateY(24px);
  }
  .js-motion [data-reveal].is-in {
    opacity: 1;
    transform: translateY(0);
    transition:
      opacity var(--dur-medium) var(--ease-brake),
      transform var(--dur-medium) var(--ease-brake);
  }

  @media (prefers-reduced-motion: reduce) {
    .js-motion [data-reveal] {
      opacity: 1;
      transform: none;
    }
    * {
      animation-duration: 0.001ms !important;
      transition-duration: 0.001ms !important;
      scroll-behavior: auto !important;
    }
  }

  /*
    Grifo — mesma regra: só apaga e vira reversível quando .js-motion está
    presente (JS + IntersectionObserver + sem reduced-motion). O toggle
    .is-active é feito por initGrifo() (js/motion.js) a cada vez que a marca
    cruza o meio da viewport — para dentro ao entrar, para fora ao sair
    (scroll para cima desfaz o destaque).
  */
  .js-motion .grifo {
    background-size: 0% var(--grifo-h, 68%);
    color: inherit;
    transition:
      background-size var(--dur-slow) var(--ease-drive),
      color var(--dur-slow) var(--ease-drive);
  }
  .js-motion .grifo.is-active {
    background-size: 100% var(--grifo-h, 68%);
    color: var(--grifo-ink, var(--asfalto));
  }
}

@layer utilities {
  .visually-hidden {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }
  .no-scroll { overflow: hidden; }
}