/*
 * tokens.css — as decisoes visuais do Claude Design, em um lugar so.
 *
 * Todo valor aqui foi extraido de `Minha Banca App.dc.html` e da folha de
 * identidade em `Minha Banca.dc.html`. Nenhuma tela escreve cor ou raio na
 * mao: se a marca mudar, muda aqui e o app inteiro acompanha.
 */

:root {
  /* --- Paleta da marca (folha de identidade) --- */
  --marsala: #580002;          /* cor principal */
  --creme: #FAF4E6;            /* fundo do app */
  --verde: #4E8C4A;            /* verde feira — confirmacao, PIX */
  --laranja: #E07B2F;          /* atencao, dinheiro */
  --terra: #8A6F5C;            /* texto de apoio */

  /* --- Variacoes de trabalho --- */
  --verde-escuro: #3E6B3A;
  --verde-fundo: #E7EFE2;
  --laranja-escuro: #9A4E14;
  --laranja-fundo: #FBEBDC;
  --vermelho: #C0392B;
  --vermelho-escuro: #8C2B22;
  --vermelho-fundo: #FBE9E7;

  /* --- Tinta (texto) --- */
  --tinta: #3A2620;            /* titulos e numeros */
  --tinta-media: #5C4A3E;      /* texto corrido */
  --tinta-fraca: #8A6F5C;      /* rotulos e legendas */
  --tinta-apagada: #B8A48E;    /* dicas e itens concluidos */

  /* --- Superficies --- */
  --papel: #FFFFFF;            /* cartoes */
  --palha: #F1E6D0;            /* teclas, chips neutros */
  --palha-forte: #F5DFC4;      /* estado pressionado, faixa offline */
  --nav: #FFFDF7;              /* barra de navegacao */
  --fora: #EAE2D3;             /* area fora do aparelho, no desktop */
  --moldura: #2A1A16;          /* borda do aparelho */

  /* --- Bordas --- */
  --borda: #E0D3BC;
  --borda-suave: #EADFC9;
  --desativado: #C9BBA4;       /* botao sem acao disponivel */
  --sobre-marsala: #E8C9B0;    /* texto secundario sobre o marsala */

  /* --- Tipografia --- */
  --fonte-titulo: 'Alfa Slab One', Georgia, serif;
  --fonte-texto: 'Sen', system-ui, -apple-system, 'Segoe UI', sans-serif;

  /* --- Raios --- */
  --raio-p: 10px;
  --raio-m: 12px;
  --raio-g: 14px;
  --raio-xg: 16px;
  --raio-xxg: 18px;
  --raio-pilula: 999px;

  /* --- Espacamento --- */
  --esp-1: 4px;
  --esp-2: 6px;
  --esp-3: 8px;
  --esp-4: 10px;
  --esp-5: 12px;
  --esp-6: 16px;
  --esp-7: 18px;
  --esp-8: 22px;

  /* --- Alvo de toque minimo (spec 26) --- */
  --toque: 44px;

  /* --- Aparelho --- */
  --largura-app: 390px;
  --altura-app: 820px;
}