/* ============================================================
   mundoPUR® — Design Tokens
   Importar ANTES de qualquer outro .css do projeto.
   ============================================================ */

:root {
  /* ── Tinta e papel ─────────────────────────────────────── */
  --ink:              #16181c;          /* texto principal, fundos escuros     */
  --ink-soft:         #2b2e35;          /* texto secundário                    */
  --muted:            #6c707a;          /* legendas, labels, índices           */
  --paper:            #f3f1ec;          /* fundo principal (papel quente)      */
  --paper-soft:       #ebe8e1;          /* banda alternativa clara             */
  --paper-2:          #e4e0d7;          /* fundo de placeholders de imagem     */
  --line:             rgba(22,24,28,.14);   /* divisórias claras 1 px          */
  --line-soft:        rgba(22,24,28,.08);
  --on-dark:          #f4f2ed;          /* texto sobre fundo escuro            */
  --on-dark-mut:      rgba(244,242,237,.62); /* texto atenuado sobre fundo escuro */
  --line-dark:        rgba(244,242,237,.16); /* divisórias sobre fundo escuro  */

  /* ── Acento (único; usar com parcimónia) ───────────────── */
  --accent:           #c90c0f;          /* vermelho mundoPUR                   */
  --accent-2:         color-mix(in srgb, var(--accent) 82%, #000);
  --on-accent:        #fbf7f2;          /* texto sobre acento                  */
  /*
    Alternativas de acento aprovadas no protótipo:
    Cobalto:  #2f5fd0
    Teal:     #1f8c93
    Verde:    #2e8b4f
  */

  /* ── Layout ────────────────────────────────────────────── */
  --maxw:             1320px;           /* largura máxima do conteúdo          */
  --gutter:           clamp(20px, 5vw, 72px); /* margens laterais fluidas     */
  --header-h:         74px;            /* altura do cabeçalho fixo            */

  /* ── Tipografia ─────────────────────────────────────────── */
  --ff-sans: "Helvetica Neue", Helvetica, Arial, "Segoe UI", Roboto,
             system-ui, sans-serif;
  --ff-mono: "Space Mono", ui-monospace, "SF Mono", Menlo,
             Consolas, monospace;
  /*
    Space Mono (Google Fonts) — APENAS para rótulos técnicos (eyebrows),
    índices, etiquetas mono e labels de formulário.
    Corpo e títulos: --ff-sans (Helvetica/sistema).
  */

  /* Escala tipográfica fluida (clamp):
     .titulo-display  clamp(2.7rem, 7.4vw, 6.2rem) / peso 700 / tracking -0.03em
     .titulo-1        clamp(2.1rem, 4.6vw, 3.7rem) / peso 700 / tracking -0.025em
     .titulo-2        clamp(1.6rem, 3vw,   2.5rem) / peso 700 / tracking -0.02em
     .titulo-3        clamp(1.2rem, 1.7vw, 1.55rem)/ peso 600 / tracking -0.015em
     .lide            clamp(1.12rem,1.7vw, 1.45rem)/ peso 400
     corpo            17px / line-height 1.5 / tracking -0.006em
     .rotulo-tecnico  12.5px mono / uppercase / letter-spacing 0.14em
  */

  /* ── Easing ─────────────────────────────────────────────── */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
}

/*
  REGRAS DE DESIGN — CUMPRIR OBRIGATORIAMENTE
  ─────────────────────────────────────────────
  1. FLAT, SEM CARDS. Proibido: border-radius > 4px + box-shadow em conjunto.
     Usar: linhas divisórias 1 px, listas tabulares, grelhas abertas.

  2. Acento (--accent) APENAS em:
     índices (.indice), pontos de lista (.lista-inclui__ponto),
     hovers de navegação, links seta (.ligacao-seta--destaque),
     ícone de confirmação de formulário.

  3. SEM reveal-text. SEM contadores animados. Conteúdo sempre visível sem JS
     e com prefers-reduced-motion. Não usar opacity:0 como estado inicial
     dependente de animação.

  4. Cursor simples do sistema — NUNCA cursor personalizado.

  5. Responsivo: desktop (≥1025px) → tablet (768–1024px) → mobile (<768px).
     Menu hamburger abaixo de 1024 px.
*/