/* Reset enxuto, base tipográfica, primitivos de layout e utilitários.
   Depende de tokens.css (que declara a ordem das camadas). */

@layer reset {
  *, *::before, *::after { box-sizing: border-box; }
  * { margin: 0; }
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
  img, svg { display: block; max-inline-size: 100%; }
  img { block-size: auto; }
  button, input, textarea, select { font: inherit; color: inherit; }
  ul[role="list"], ol[role="list"] { list-style: none; padding: 0; }
  fieldset { border: 0; padding: 0; min-inline-size: 0; }
  table { border-collapse: collapse; }
  [hidden] { display: none !important; } /* hidden precisa vencer display de qualquer camada */
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration: 0.01ms !important;  /* desarmar movimento é o propósito */
      animation-iteration-count: 1 !important;
      transition-duration: 0.01ms !important;
      scroll-behavior: auto !important;
    }
  }
}

@layer base {
  body {
    min-block-size: 100dvh;
    background: var(--fundo);
    color: var(--texto);
    font-family: var(--fonte);
    font-size: var(--fs-0);
    line-height: 1.5;
    overflow-x: clip;
  }
  h1, h2, h3, h4 { line-height: 1.2; letter-spacing: -0.015em; text-wrap: balance; }
  h1 { font-size: var(--fs-3); font-weight: 800; letter-spacing: -0.025em; }
  h2 { font-size: var(--fs-2); font-weight: 800; }
  h3 { font-size: var(--fs-1); font-weight: 700; }
  p { text-wrap: pretty; }
  a { color: var(--marca-texto); text-underline-offset: 0.15em; }
  :focus-visible { outline: 3px solid var(--foco); outline-offset: 2px; border-radius: 4px; }
  [tabindex="-1"]:focus { outline: none; }
  :where(td, .num, time, output) { font-variant-numeric: tabular-nums; }
  code, kbd { font-family: var(--mono); font-size: 0.9em; }
  :where(input[type="checkbox"], input[type="radio"], input[type="range"], progress) { accent-color: var(--marca); }
  ::selection { background: color-mix(in oklch, var(--marca) 30%, transparent); }
}

@layer layout {
  /* Stack: ritmo vertical entre irmãos */
  .pilha { display: flex; flex-direction: column; gap: var(--esp, var(--esp-2)); }
  .pilha--1 { --esp: var(--esp-1); }
  .pilha--3 { --esp: var(--esp-3); }
  .pilha--4 { --esp: var(--esp-4); }

  /* Center: largura máxima com respiro lateral */
  .centro { inline-size: 100%; max-inline-size: var(--largura, 72rem); margin-inline: auto; padding-inline: var(--gutter); }
  .centro--texto { --largura: 40rem; }

  /* Cluster: grupo que quebra sozinho */
  .grupo { display: flex; flex-wrap: wrap; gap: var(--esp-1) var(--esp-2); align-items: center; }
  .grupo--fim { justify-content: flex-end; }
  .grupo--entre { justify-content: space-between; }

  /* Grid automático: quantas colunas couberem, sem estourar em tela estreita */
  .grade { --min: 15rem; display: grid; gap: var(--esp-3); grid-template-columns: repeat(auto-fit, minmax(min(var(--min), 100%), 1fr)); }
  .grade--kpi { --min: 11rem; gap: var(--esp-2); }

  /* Sidebar: a lateral tem largura intrínseca; o conteúdo ocupa o resto e cai para baixo quando falta espaço */
  .lateral { display: flex; flex-wrap: wrap; gap: var(--esp-3); align-items: flex-start; }
  .lateral > * { min-inline-size: 0; }
  .lateral > :first-child { flex: 999 1 28rem; }
  .lateral > :last-child { flex: 1 1 var(--lado, 20rem); }
  .lateral--inversa > :first-child { flex: 1 1 var(--lado, 20rem); }
  .lateral--inversa > :last-child { flex: 999 1 28rem; }

  /* Switcher: linha vira coluna quando o contêiner fica abaixo do limiar */
  .alternador { display: flex; flex-wrap: wrap; gap: var(--esp-2); }
  .alternador > * { flex-grow: 1; flex-basis: calc((var(--limiar, 30rem) - 100%) * 999); }
}

@layer utilitarios {
  .visualmente-oculto {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .texto-suave { color: var(--texto-3); }
  .texto-fim { text-align: end; }
  .sem-quebra { white-space: nowrap; }
  .largura-total { inline-size: 100%; }
}