/* marca.css — identidade visual Felipe Mattos (manual de marca v1, outubro de 2026)
   Use este arquivo no site e nas calculadoras do Raio-X:
   <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Newsreader:wght@400;600;700&family=Instrument+Sans:wght@400;600;700&family=JetBrains+Mono:wght@400;500&display=swap">
   <link rel="stylesheet" href="/marca.css">
*/
:root{
  /* cor */
  --nanquim:#17223B;     /* base escura, autoridade */
  --grafite:#1B1F27;     /* texto sobre claro */
  --esmalte:#F5F2EC;     /* fundo claro, nunca branco puro */
  --porcelana:#DCD6CA;   /* apoio, divisórias, texto sobre escuro */
  --margem:#2E9E72;      /* o ponto e o número que importa: uso raro */
  --cinza:#5A6170;       /* texto secundário sobre claro (5,6:1) */
  --cinza-escuro:#B9B4A8;/* texto secundário sobre Nanquim (7,6:1) */
  --cartao:#FBF9F5;      /* superfície de cartão sobre Esmalte */

  /* tipografia: professor, clínico, engenheiro de dados */
  --serifa:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Instrument Sans',Arial,Helvetica,sans-serif;
  --mono:'JetBrains Mono','Courier New',monospace;

  /* forma */
  --raio:12px;
  --raio-grande:20px;
  --linha:1px solid var(--porcelana);
}

/* base */
body{background:var(--esmalte);color:var(--grafite);font-family:var(--sans);line-height:1.55}
h1,h2,h3{font-family:var(--serifa);font-weight:600;color:var(--nanquim);line-height:1.1;letter-spacing:-.01em;text-wrap:balance}

/* rótulos e números */
.rotulo{font-family:var(--mono);font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--cinza)}
.valor{font-family:var(--mono);font-weight:500;font-variant-numeric:tabular-nums}
.valor--destaque{color:var(--margem)}            /* um por tela */
.valor--perda::before{content:"− "}              /* perda em Grafite, nunca vermelho */

/* botões */
.botao{display:inline-flex;align-items:center;gap:.5em;font:600 1rem/1 var(--sans);padding:.95em 1.4em;border-radius:var(--raio);border:0;cursor:pointer;text-decoration:none}
.botao--primario{background:var(--margem);color:var(--grafite)}
.botao--secundario{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.botao:focus-visible{outline:3px solid var(--margem);outline-offset:3px}

/* cartões e campos (calculadoras) */
.cartao{background:var(--cartao);border:var(--linha);border-radius:var(--raio-grande);padding:28px}
.campo{display:flex;flex-direction:column;gap:6px}
.campo label{font-weight:600;font-size:.92rem}
.campo input,.campo select{font:500 1rem var(--mono);padding:.75em .9em;border:1.5px solid var(--porcelana);border-radius:var(--raio);background:#fff;color:var(--grafite)}
.campo input:focus{outline:none;border-color:var(--nanquim)}