/* Tokens do design system "Rodomix Torre".
 *
 * Valores transcritos do readme do design system (claude.ai/design, 06/10/2026).
 * Quando os arquivos originais (tokens/*.css) forem exportados, este arquivo é o
 * único ponto a substituir: o resto do CSS só usa as variáveis abaixo.
 *
 * Acréscimos em relação ao design system, marcados com (+): variantes de cor
 * para TEXTO com contraste AA sobre fundo claro. As cores originais de ganho,
 * perda e atenção continuam valendo para preenchimentos.
 */

@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 400;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans-latin-400-normal.503e7cbdb484.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 500;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans-latin-500-normal.e5e6761eaecb.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 600;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans-latin-600-normal.79e62f3332cd.woff2") format("woff2");
}
@font-face {
  font-family: "Plus Jakarta Sans";
  font-weight: 700;
  font-display: swap;
  src: url("../fontes/plus-jakarta-sans-latin-700-normal.5b629bd8abb4.woff2") format("woff2");
}
@font-face {
  font-family: "Urbanist";
  font-weight: 200;
  font-display: swap;
  src: url("../fontes/urbanist-latin-200-normal.cab2e2a1e9b2.woff2") format("woff2");
}
@font-face {
  font-family: "Urbanist";
  font-weight: 300;
  font-display: swap;
  src: url("../fontes/urbanist-latin-300-normal.b9b37cdaa307.woff2") format("woff2");
}

:root {
  /* Marca e destaque */
  --lima: #c2f86c;
  --lima-forte: #aaf149;
  --lima-suave: #e3fbbd;
  --tinta: #141414;
  --tinta-2: #202020;
  --verde-logo: #008a00;

  /* Semântica da operação */
  --ganho: #2fa956;
  --ganho-grafico: #1ac09a;
  --atencao: #f5c861;
  --perda: #f25022;
  --ganho-texto: #1c7a3c; /* (+) */
  --atencao-texto: #7a5a00; /* (+) */
  --perda-texto: #c2330b; /* (+) */
  --ganho-fundo: #dcf3e3; /* (+) */
  --atencao-fundo: #fdf0cf; /* (+) */
  --perda-fundo: #fde0d6; /* (+) */

  /* Neutros de página (telas públicas e editoriais) */
  --pagina: #efefef;
  --pagina-cartao: #f3f3f3;
  --pagina-tile: #f7f7f7;
  --pagina-tag: #e8e8e8;

  /* Neutros menta (dentro do aplicativo) */
  --canvas: #e6ebe7;
  --cartao: #ebf0ec;
  --tile: #f5f7f4;
  --controle: #f9faf9;
  --branco: #ffffff;

  /* Texto */
  --texto: #141414;
  --texto-suave: #5a625c; /* (+) cinza dos rótulos, com contraste AA */
  --texto-fraco: #7b837d; /* (+) só para legendas grandes ou decorativas */
  --linha: rgba(20, 20, 20, 0.08);
  --linha-forte: rgba(20, 20, 20, 0.16); /* (+) divisória visível de longe (Painel TV) */
  --borda-campo: #8f9690; /* (+) contorno de campo de formulário, contraste 3:1 */

  /* Tipografia */
  --fonte: "Plus Jakarta Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-display: "Urbanist", "Plus Jakarta Sans", system-ui, sans-serif;
  --t-titulo: clamp(1.9rem, 1.2rem + 2vw, 2.75rem);
  --t-heroi: clamp(2.5rem, 1.6rem + 2.6vw, 4rem);
  --t-valor: 1.5rem;
  --t-cartao: 1.125rem;
  --t-corpo: 0.875rem;
  --t-legenda: 0.75rem;

  /* Espaço (base 4px) */
  --e1: 4px;
  --e2: 8px;
  --e3: 12px;
  --e4: 16px;
  --e5: 20px;
  --e6: 24px;
  --e8: 32px;
  --e10: 40px;
  --vao: 12px;

  /* Raio */
  --r-cartao: 26px;
  --r-tile: 18px;
  --r-moldura: 40px;
  --r-pilula: 999px;

  /* Efeitos */
  --sombra-fio: inset 0 1px 0 rgba(255, 255, 255, 0.75);
  --sombra-flutuante: 0 18px 48px rgba(20, 20, 20, 0.14), 0 2px 6px rgba(20, 20, 20, 0.06);
  --gradiente-app: linear-gradient(180deg, #eef2ef 0%, #e6ebe7 55%, #e3eae2 100%);
  --brilho-lima: radial-gradient(55% 45% at 0% 100%, rgba(194, 248, 108, 0.5), rgba(194, 248, 108, 0) 70%);
  --gradiente-moldura: linear-gradient(180deg, #e6ebe7 0%, #e9f6d6 100%);
  --hachura: repeating-linear-gradient(120deg, rgba(20, 20, 20, 0.13) 0 1px, transparent 1px 7px);
  --pontilhado: radial-gradient(rgba(20, 20, 20, 0.14) 1px, transparent 1.4px) 0 0 / 8px 8px;
  --foco: 0 0 0 2px var(--tinta), 0 0 0 5px var(--lima);

  /* Movimento */
  --curva: cubic-bezier(0.2, 0.8, 0.2, 1);
  --rapido: 120ms;
  --medio: 220ms;
}