/* ==========================================================================
   Jão~ mails · tokens
   Molde: static/assets/css/resurgo-tokens.css (Neto-Montalvao/resurgo-ecommerce).
   Mesmos nomes de token, mesmo html{font-size:1px} com tudo em rem.
   Só os valores mudam. Paleta vinda do manual de identidade da Jão~.
   ========================================================================== */

html {
  /* 1rem = 1px. Toda medida do projeto é escrita em rem. */
  font-size: 1px;
}

:root {
  /* --- cinco graus de preto-terminal ------------------------------------ */
  --bg: #001219;        /* tinta 0 · fundo da tela                          */
  --bg-2: #041C25;      /* painel · cartão, tabela, faixa                   */
  --panel: #0A2833;     /* passagem do mouse · cabeçalho de tabela          */
  --panel-2: #123742;   /* selecionado · campo, esqueleto, régua vazia      */
  --line: #16404F;      /* linha                                           */
  --line-2: #1C4A57;    /* linha acesa · contorno de botão, entrega apagada */
  --line-3: #0E2A34;    /* linha interna de tabela (mais discreta)          */

  /* --- texto ------------------------------------------------------------ */
  --ink: #FAF8F6;                    /* papel = letra                       */
  --ink-2: #C9D0D3;                  /* explicação                          */
  --ink-3: #8C979C;                  /* rótulo e apoio (hex, não alfa)      */
  --ink-4: rgba(250, 248, 246, .24); /* desativado                          */

  /* --- ação e estado ---------------------------------------------------- */
  --invert-bg: #FFB000;   /* âmbar: campo com texto preto, nunca letra      */
  --invert-fg: #001219;
  --invert-hover: #FFC233;
  --ok: #30DA33;          /* só confirma, nunca clica                       */
  --warn: #FFB000;        /* atenção — mesma tinta da ação                  */
  --fail: #E23A2E;        /* falha ou prazo                                 */

  /* véus de fundo das faixas: a cor nunca é chapada atrás de texto */
  --veu-fail: rgba(226, 58, 46, .09);
  --veu-warn: rgba(255, 176, 0, .08);
  --veu-warn-fraco: rgba(255, 176, 0, .06);
  --veu-ok: rgba(48, 218, 51, .08);

  /* hachura = sem destino. Mesma trama no medidor, no selo e no marcador. */
  --hachura: repeating-linear-gradient(45deg, #E23A2E 0 3px, #5E1610 3px 6px);
  --hachura-mini: repeating-linear-gradient(45deg, #E23A2E 0 2px, #5E1610 2px 4px);

  /* --- tipografia ------------------------------------------------------- */
  --font-grot: 'Figtree', system-ui, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, monospace;

  /* --- forma ------------------------------------------------------------ */
  --r: 2rem;
  --r-md: 3rem;

  /* --- larguras --------------------------------------------------------- */
  --maxw: 1320rem;        /* área administrativa                            */
  --maxw-user: 680rem;    /* área do usuário: coluna única, mais espaçada   */
  --trilha: 224rem;       /* trilha lateral com rótulo                      */
  --trilha-min: 56rem;    /* trilha só com ícone (degrau laptop)            */
  --linha-tabela: 44rem;  /* altura fixa de linha e alvo mínimo de toque    */
}

/* A única media query do projeto — igual à do Resurgo: encolhe a raiz.
   Os seis degraus de layout são classe (ver assets/js/degraus.js), não
   breakpoint de CSS. O piso existe porque, sem ele, a 320px a chave DKIM
   cairia para 9,6px e deixaria de ser legível. */
@media (max-width: 399px) {
  html {
    font-size: max(.88px, .25vw);
  }
}