/* ==========================================================================
   tokens.css — identidade do Pede Pra Quem Faz (paleta Laranja Obra).
   Fundo claro sempre. Valores do guia de design (front-design-brief.md).
   ========================================================================== */
:root {
  color-scheme: light;

  /* Marca */
  --laranja: #E8590C;
  --laranja-escuro: #B23F00;   /* texto de acento (contraste AA sobre branco) */
  --laranja-claro: #FFEDE0;
  --laranja-anel: #B23F00;     /* anel de foco: 5,5:1 sobre o --fundo (WCAG 1.4.11 pede 3:1); com halo branco por dentro */
  --anel-halo: #FFFFFF;
  --petroleo: #0F4C5C;
  --petroleo-claro: #E2EFF2;
  --amarelo: #FFC93C;
  --amarelo-claro: #FFF6D6;
  /* Laranja dos botões: o #E8590C com texto branco dá 3,6:1; este dá 4,7:1 (WCAG AA). A marca segue #E8590C. */
  --laranja-botao: #C94A06;
  --laranja-botao-hover: #B23F00;

  /* Neutros */
  --fundo: #F7F7F8;
  --superficie: #FFFFFF;
  --superficie-2: #F0F1F3;
  --tinta: #17181C;
  --apagado: #626773;
  --linha: #E4E5E9;
  --borda-campo: #8A8F9A;
  --branco: #FFFFFF;

  /* Status */
  --ok: #138A4F;    --ok-soft: #E1F5EA;
  --warn: #B45F06;  --warn-soft: #FFF1DC;
  --crit: #C8233F;  --crit-soft: #FFE6EA;
  /* Texto de status sobre o fundo -soft (contraste AA); os tons do guia ficam para ícones e bordas. */
  --ok-tinta: #0E7A43;
  --warn-tinta: #9A5105;
  --crit-borda: #F2B8C2;       /* borda/filete crítico sobre branco (botão de perigo secundário, citação de denúncia) */
  --amarelo-tinta: #6B4A00;    /* texto sobre --amarelo-claro (contraste AA) */

  /* Tipografia */
  --f-display: "Bricolage Grotesque", "Segoe UI", system-ui, -apple-system, sans-serif;
  --f-ui: "Manrope", "Segoe UI", system-ui, -apple-system, Roboto, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, "Cascadia Mono", Consolas, monospace;

  --t-xs: 13px;
  --t-sm: 14px;
  --t-md: 16px;
  --t-lg: 19px;
  --t-xl: 24px;
  --t-2xl: 30px;
  --t-3xl: 36px;

  /* Raios */
  --r-campo: 12px;
  --r-botao: 12px;
  --r-cartao: 16px;
  --r-chip: 999px;

  /* Sombras: só cartão em destaque e barra fixa */
  --sombra-destaque: 0 10px 30px -18px rgba(23, 24, 28, .45);
  --sombra-barra: 0 -8px 24px -16px rgba(23, 24, 28, .35);
  --sombra-dialogo: 0 24px 60px -24px rgba(23, 24, 28, .55);
  --veu: rgba(23, 24, 28, .45);              /* fundo atrás de diálogo e gaveta */
  --fundo-vidro: rgba(247, 247, 248, .95);   /* barra fixa translúcida sobre o --fundo */

  /* Espaço */
  --gutter: 16px;
  --coluna: 480px;

  /* Movimento */
  --ease-out: cubic-bezier(.2, .8, .2, 1);
  --d-toque: 150ms;
  --d-entrada: 250ms;
  --d-passo: 350ms;
}