/* ==========================================================================
   Sistema JIJ Filhos · global.css
   Tokens de cor e fonte, reset e tipografia. Usado por TODAS as telas.
   Cores tiradas da logo: verde-sálvia (quadros), verde-limão (destaque), grafite (texto).
   ========================================================================== */

:root {
  /* marca */
  --marca:        #4F7A67;   /* verde-sálvia da logo, um tom mais escuro para ler bem */
  --marca-forte:  #2F4A3E;   /* botões principais, menu */
  --marca-suave:  #E6EFEA;   /* fundos de destaque */
  --lima:         #98C048;   /* verde-limão da logo: detalhes, barra de progresso */
  --lima-texto:   #4E6B17;   /* limão escurecido para texto sobre fundo claro */

  /* neutros (levemente esverdeados) */
  --fundo:        #F4F6F3;
  --cartao:       #FFFFFF;
  --tinta:        #23272A;
  --tinta-2:      #4A524D;
  --mudo:         #69736D;
  --linha:        #DCE3DD;
  --linha-forte:  #C5CFC8;
  --campo:        #FFFFFF;

  /* estados (não são a cor da marca) */
  --ok:           #2F8A4E;
  --ok-fundo:     #E5F4EA;
  --aviso:        #A86A00;
  --aviso-fundo:  #FBF1DC;
  --perigo:       #C2372F;
  --perigo-fundo: #FBE7E5;
  --info:         #2D6CA8;
  --info-fundo:   #E4EEF8;

  --sombra:       0 1px 2px rgb(30 40 35 / .06), 0 4px 16px rgb(30 40 35 / .06);
  --raio:         10px;
  --raio-g:       14px;

  /* fontes */
  --f-titulo: 'Plus Jakarta Sans', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-texto:  'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --f-numero: 'Inter', 'Segoe UI', system-ui, sans-serif;

  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --marca: #8DB8A4; --marca-forte: #A9CFBC; --marca-suave: #1F2B26;
    --lima: #A7CF5A; --lima-texto: #B9DC74;
    --fundo: #111513; --cartao: #191F1C; --tinta: #E6ECE8; --tinta-2: #C3CCC6;
    --mudo: #9AA59E; --linha: #2A332E; --linha-forte: #3A4640; --campo: #141917;
    --ok: #5CC27F; --ok-fundo: #16301F; --aviso: #E3A63B; --aviso-fundo: #33270F;
    --perigo: #F07A71; --perigo-fundo: #3A1A18; --info: #74ADE6; --info-fundo: #142638;
    --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --marca: #8DB8A4; --marca-forte: #A9CFBC; --marca-suave: #1F2B26;
  --lima: #A7CF5A; --lima-texto: #B9DC74;
  --fundo: #111513; --cartao: #191F1C; --tinta: #E6ECE8; --tinta-2: #C3CCC6;
  --mudo: #9AA59E; --linha: #2A332E; --linha-forte: #3A4640; --campo: #141917;
  --ok: #5CC27F; --ok-fundo: #16301F; --aviso: #E3A63B; --aviso-fundo: #33270F;
  --perigo: #F07A71; --perigo-fundo: #3A1A18; --info: #74ADE6; --info-fundo: #142638;
  --sombra: 0 1px 2px rgb(0 0 0 / .3), 0 4px 16px rgb(0 0 0 / .25);
  color-scheme: dark;
}

/* ---------------------------------------------------------------- reset */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fundo);
  color: var(--tinta);
  font-family: var(--f-texto);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img, svg { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--marca); }
[hidden] { display: none !important; }

/* ---------------------------------------------------------------- tipografia */
h1, h2, h3, h4 {
  font-family: var(--f-titulo);
  line-height: 1.2;
  margin: 0;
  text-wrap: balance;
  letter-spacing: -.01em;
}
h1 { font-size: clamp(22px, 3vw, 28px); font-weight: 800; }
h2 { font-size: 19px; font-weight: 700; }
h3 { font-size: 16px; font-weight: 700; }
p  { margin: 0; }
.mudo { color: var(--mudo); }
.rotulo {
  font-size: 11.5px; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mudo);
}
.num { font-family: var(--f-numero); font-variant-numeric: tabular-nums; }

/* ---------------------------------------------------------------- logo
   A logo tem o texto em grafite: no tema escuro ela vai sobre uma placa clara. */
.logo-placa {
  display: inline-flex; align-items: center;
  background: #FFFFFF; border-radius: 10px; padding: 6px 10px;
}
.logo-placa img { height: 40px; width: auto; }

/* ---------------------------------------------------------------- foco e movimento */
:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}