/* Tokens da marca Operação AutonomIA. As cores vêm do arquivo oficial (medidas pixel a pixel);
   os que não vêm de lá estão marcados como derivados e têm o contraste conferido em verificacao/contraste.mjs. */
:root {
  /* Cor */
  --papel: #fdfbfa;
  --creme: #e4ded8;
  --grafite: #42423c;
  --grafite-claro: #6d6a62;
  --terracota: #b26146;
  --laranja: #f07c34;         /* grafismo e brilho. Nunca texto (2,4:1). */
  --laranja-txt: #c2500f;     /* texto laranja e fundo do botão principal */
  --escuro: #2a2724;          /* só bloco de prompt e modal */
  --fio: rgba(66, 66, 60, .16);
  --grade: rgba(178, 97, 70, .08);
  --certo: #178a4c;           /* verde de aprovação: ícone e traço (4,3:1 sobre papel) */
  --errado: #b3261e;          /* vermelho de aviso */

  /* Derivados */
  --certo-txt: #11703d;       /* o mesmo verde, escurecido pra passar 4,5:1 como texto */
  --folha: #f3efeb;           /* papel creme claro da folha NEGOCIO.md */
  --fio-campo: #8a867d;       /* borda de campo e controle: 3:1 sobre o papel */

  /* Tipografia */
  --f-display: 'Instrument Serif', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-corpo: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --f-mono: 'DM Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  --t-abertura: clamp(2.5rem, 1.5rem + 5vw, 6rem);       /* 40 a 96px */
  --t-titulo: clamp(2.5rem, 1.55rem + 4.4vw, 4.75rem);   /* 40 a 76px */
  --t-h2: clamp(1.75rem, 1.45rem + 1.4vw, 2.5rem);       /* 28 a 40px */
  --t-h3: clamp(1.375rem, 1.25rem + .6vw, 1.75rem);      /* 22 a 28px */
  --t-corpo: clamp(1.0625rem, 1.02rem + .22vw, 1.125rem); /* 17 a 18px */
  --t-ui: 1rem;
  --t-apoio: .875rem;
  --t-mono: .875rem;

  /* Espaço (base de 4px) */
  --e1: .25rem;
  --e2: .5rem;
  --e3: .75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --e9: 6rem;

  --r-p: 8px;
  --r-m: 12px;
  --r-pilula: 999px;
  --margem: 1.25rem;           /* gutter lateral no celular */
  --alto-topo: 3.5rem;
  --alto-barra: 3.5rem;        /* barra "Sua ficha" no celular */

  /* Movimento */
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-suave: cubic-bezier(.4, 0, .2, 1);
  --mola: cubic-bezier(.34, 1.56, .64, 1);
  --dur-rapida: 160ms;
  --dur: 280ms;
  --dur-lenta: 450ms;

  /* O papel quadriculado: uma camada só, usada no fundo fixo e no topo fixo pra emendar sem faixa */
  --grade-passo: 34px;
  --grade-img: linear-gradient(to right, var(--grade) 1px, transparent 1px),
               linear-gradient(to bottom, var(--grade) 1px, transparent 1px);
}

/* Mola de verdade (amortecida, passa 8% e assenta), onde o navegador entende linear() */
@supports (transition-timing-function: linear(0, 1)) {
  :root {
    --mola: linear(0, 0.0318, 0.1129, 0.2245, 0.3514, 0.4816, 0.6064, 0.7197, 0.818, 0.8996, 0.9642, 1.0128, 1.047, 1.0687, 1.0801, 1.0835, 1.081, 1.0742, 1.0649, 1.0543, 1.0435, 1.033, 1.0235, 1.0153, 1.0085, 1.0031, 0.999, 0.9961, 0.9943, 0.9933, 0.993, 0.9932, 0.9938, 0.9946, 0.9954, 0.9964, 1);
  }
}

@media (min-width: 48em) {
  :root { --margem: 2rem; --alto-topo: 4rem; }
}

@media (min-width: 67.5em) {
  :root { --margem: 2.5rem; --alto-topo: 4.5rem; }
}