/* ============================================================
   HelpBots — tokens
   Cor, forma e componentes herdados do "Design System Apps v1.1".
   Tipografia derivada de referência.png (títulos em peso regular,
   não Archivo bold como nos apps) — desvio deliberado.
   ============================================================ */

:root {
  /* ── cor ───────────────────────────────────────────────── */
  --bg:            #FFFFFF;
  --ink:           #000000;
  --ink-soft:      #171717;
  --muted:         #737373;   /* texto secundário */
  --muted-soft:    #A3A3A3;   /* metadado apagado */
  --border:        #E5E5E5;
  --wash:          #F8FAFC;
  --wash-2:        #F1F5F9;

  --green:         #478A38;   /* primary-readable — texto/ícone/traço */
  --green-soft:    #7BB36B;   /* status-completed — 2ª série, apoio */
  --green-fill:    #C7E5C0;   /* primary — SÓ como fill, nunca texto */
  --green-ghost:   rgba(199, 229, 192, .28);

  /* ── tipografia ────────────────────────────────────────── */
  --sans:    'Roboto', system-ui, -apple-system, 'Helvetica Neue', sans-serif;
  --mono:    'Roboto Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --display: 'Oswald', var(--sans);          /* wordmark + números display */
  --emoji:   'Noto Emoji', var(--sans);      /* só o glifo ✨ (U+2728) */

  /* escala fluida — sem breakpoint, o texto acompanha a tela.
     SEIS níveis, do maior ao menor, e nada fora deles:
       1 · --fs-h1     título do hero (só lá)
       2 · --fs-h2     título de cada seção
       3 · --fs-quote  citações e frases de virada
       4 · --fs-body   texto corrido (lead, duo, FAQ, tabelas)
       5 · --fs-sm     h3 mono e textos de apoio (trio, ruler)
       6 · --fs-over   micro: overlines, num, rótulos e fontes de citação
     Qualquer novo texto entra num destes — não se cria tamanho avulso. */
  --fs-h1:    clamp(2.125rem, 1.15rem + 4.35vw, 4.25rem);
  --fs-h2:    clamp(1.625rem, 1.05rem + 2.55vw, 2.875rem);
  --fs-quote: clamp(1.375rem, 1.05rem + 1.45vw, 2.125rem);
  --fs-body:  clamp(1rem, .96rem + .2vw, 1.125rem);
  --fs-sm:    .875rem;
  --fs-over:  .625rem;      /* 10px — o overline canônico */
  --fs-over-s: .5625rem;    /* 9px */
  --track:    .1em;         /* tracking-widest */

  /* ── ritmo ─────────────────────────────────────────────── */
  /* Um só compasso: --gap separa blocos DENTRO da seção, e a soma dos
     paddings (2 × --section-y) separa uma seção da outra — mesmo valor.
     Sem os <hr>, é o espaço que marca o corte. */
  --gutter:    clamp(1.25rem, .35rem + 3.4vw, 6rem);   /* 20 → 96px */
  --gap:       clamp(3.25rem, 2rem + 4vw, 6rem);       /* 52 → 96px */
  --section-y: calc(var(--gap) * .75);   /* seção↔seção = 1,5 × --gap */
  --stack:     clamp(1.5rem, 1.05rem + 1.7vw, 2.5rem); /* ritmo interno */
  --nav-h:     clamp(68px, 58px + 2.2vw, 96px);
  --measure:   68ch;   /* largura máxima de linha de leitura */

  /* ── forma ─────────────────────────────────────────────── */
  --r-card:  28px;
  --r-ficha: 32px;
  --r-pill:  9999px;
  --hairline: 1px solid var(--border);

  /* ── elevação ──────────────────────────────────────────── */
  --shadow-sm:    0 1px 2px 0 rgb(0 0 0 / .05);
  --shadow-float: 0 20px 25px -5px rgb(0 0 0 / .05),
                  0 8px 10px -6px rgb(0 0 0 / .05);

  /* ── movimento ─────────────────────────────────────────── */
  --dur:   .2s;
  --dur-2: .3s;
  --ease:  cubic-bezier(.4, 0, .2, 1);
}