/*
 * Juntei — tokens de design (fonte única: design/tokens.css)
 *
 * Usado pelo site (cópia em site/assets/tokens.css, sincronizada por design/sincronizar.sh)
 * e pelo app (o Rex importa este arquivo). Os NOMES são contrato: não renomeie sem avisar o app.
 *
 * Marca: azul dominante + branco; verde como acento (moeda do logo, "você juntou", CTA secundário).
 * Vermelho e âmbar só quando o significado pede (saída/perigo, alerta).
 *
 * Tema:
 *   - padrão = claro;
 *   - segue o sistema (prefers-color-scheme: dark), a menos que <html data-theme="light">;
 *   - <html data-theme="dark"> força o escuro mesmo com o sistema claro.
 *
 * Contrastes medidos (WCAG 2.x) estão em design/marca.md. Resumo: todo texto >= 4,5:1 nos dois temas;
 * --cor-acento (verde-500) NÃO serve de texto sobre branco (2,5:1) — para texto use --cor-acento-texto.
 */

:root {
  /* ── Escalas da marca (iguais nos dois temas; os papéis abaixo é que mudam) ── */
  --azul-50: #eff5ff;
  --azul-100: #dce8fe;
  --azul-200: #bfd5fe;
  --azul-300: #93b8fd;
  --azul-400: #6096fa;
  --azul-500: #3b76f6;
  --azul-600: #2563eb;
  --azul-700: #1d4ed8;
  --azul-800: #1e40af;
  --azul-900: #1e3a8a;
  --azul-950: #172554;

  --verde-50: #ecfdf5;
  --verde-100: #d1fae5;
  --verde-200: #a7f3d0;
  --verde-300: #6ee7b7;
  --verde-400: #34d399;
  --verde-500: #10b981;
  --verde-600: #059669;
  --verde-700: #047857;
  --verde-800: #065f46;
  --verde-900: #064e3b;

  --marinho-700: #23304a;
  --marinho-800: #17223a;
  --marinho-850: #111a2e;
  --marinho-900: #0b1220;

  color-scheme: light;

  /* ── Cor: marca ─────────────────────────────────────────── */
  --cor-primaria: #2563eb;            /* azul-600: botões, ênfase, gráfico principal */
  --cor-primaria-contraste: #ffffff;  /* texto sobre --cor-primaria (5,17:1) */
  --cor-primaria-hover: #1d4ed8;      /* azul-700 (branco por cima: 6,70:1) */
  --cor-primaria-texto: #1d4ed8;      /* link e realce em texto corrido (6,12:1 no pior fundo) */
  --cor-primaria-suave: #eff5ff;      /* azul-50: selo, item ativo, faixa */
  --cor-acento: #10b981;              /* verde-500: moeda, destaques, detalhes — gráfico, não texto */
  --cor-acento-contraste: #052e1f;    /* texto sobre --cor-acento (5,84:1) */
  --cor-acento-texto: #047857;        /* verde como texto: "você juntou R$ X" (5,21:1 no pior fundo) */
  --cor-acento-suave: #ecfdf5;        /* verde-50: fundo de CTA secundário, selo de economia */
  --cor-acento-borda: #059669;        /* anel da moeda */

  /* ── Cor: superfícies e tinta ───────────────────────────── */
  --fundo: #ffffff;                   /* plano da página */
  --superficie: #ffffff;              /* cartões, diálogos, área de gráfico */
  --superficie-2: #f4f7fc;            /* faixa alternada, campo desabilitado, trilho */
  --texto: #0f1b33;                   /* 17,14:1 sobre branco */
  --texto-suave: #4a5873;             /* 6,53:1 no pior caso (--cor-primaria-suave) */
  --borda: #e3e9f3;                   /* hairline decorativa (separadores, cartões) */
  --borda-forte: #8090aa;             /* contorno de campo/controle (3,01:1 sobre --superficie-2) */
  --foco: #2563eb;                    /* anel de foco */

  /* ── Cor: estado (reservadas — nunca como cor de série; sempre com ícone + texto) ── */
  --sucesso: #047857;                 /* entrada de dinheiro, meta cumprida (5,48:1) */
  --sucesso-suave: #ecfdf5;
  --alerta: #b45309;                  /* 5,02:1 */
  --alerta-suave: #fff6e0;
  --perigo: #c81e1e;                  /* saída, erro (5,34:1 no pior fundo) */
  --perigo-suave: #fdecec;

  /* ── Cor: categorias de gasto (gráficos, onda 2) ───────────
   * Ordem FIXA — a ordem é o mecanismo de daltonismo (validada no validador da casa, design/marca.md).
   * --cat-N = marca (barra, fatia, ponto); --cat-N-texto = rótulo de dado na cor da série (>= 4,6:1).
   * 9ª categoria em diante NÃO ganha cor nova: vai para "Outros" (--cat-outros).
   * Gráfico de dispersão/mapa (todos os pares visíveis): no máximo as 3 primeiras. */
  --cat-1: #2563eb;  --cat-1-texto: #2563eb;   /* azul */
  --cat-2: #0d9488;  --cat-2-texto: #007e73;   /* verde-azulado */
  --cat-3: #b7791f;  --cat-3-texto: #9c640b;   /* ocre */
  --cat-4: #0284c7;  --cat-4-texto: #0075b3;   /* ciano */
  --cat-5: #e0603c;  --cat-5-texto: #bd4b2a;   /* coral */
  --cat-6: #c0399b;  --cat-6-texto: #be3899;   /* magenta */
  --cat-7: #7c3aed;  --cat-7-texto: #7c3aed;   /* violeta */
  --cat-8: #e0577a;  --cat-8-texto: #bf4464;   /* rosa */
  --cat-outros: #7a879c;  --cat-outros-texto: #657184;
  --grafico-grade: #e8edf5;           /* linha de grade (hairline) */
  --grafico-eixo: #c3ccda;            /* linha de base / eixo */

  /* ── Forma: bem arredondada (amigável) ──────────────────── */
  --raio-sm: 10px;
  --raio: 16px;
  --raio-lg: 24px;
  --raio-xl: 32px;
  --raio-pilula: 999px;
  --sombra: 0 1px 2px rgb(15 27 51 / 0.05), 0 6px 16px rgb(15 27 51 / 0.06);
  --sombra-lg: 0 2px 6px rgb(15 27 51 / 0.05), 0 24px 48px rgb(29 78 216 / 0.14);
  --vidro: rgb(255 255 255 / 0.72);   /* camada de vidro fosco (com backdrop-filter) */
  --vidro-borda: rgb(255 255 255 / 0.9);

  /* ── Movimento ──────────────────────────────────────────── */
  --mola: cubic-bezier(0.34, 1.56, 0.64, 1);   /* leve "bounce" */
  --suave: cubic-bezier(0.22, 1, 0.36, 1);
  --duracao: 0.2s;

  /* ── Tipografia (fonte do SISTEMA: sem download, CSP estrita) ── */
  --fonte: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --fonte-titulo: ui-rounded, "SF Pro Rounded", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --fonte-mono: ui-monospace, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;

  --texto-xs: 0.75rem;    /* 12px — legenda, rótulo de eixo */
  --texto-sm: 0.875rem;   /* 14px — apoio */
  --texto-base: 1rem;     /* 16px — corpo (nunca menos em campo de formulário: evita zoom no iPhone) */
  --texto-lg: 1.125rem;   /* 18px — lead */
  --texto-xl: 1.25rem;    /* 20px — título de cartão */
  --texto-2xl: 1.5rem;    /* 24px — título de seção (celular) */
  --texto-3xl: 2rem;      /* 32px — título de seção (desktop) */
  --texto-4xl: 2.5rem;    /* 40px — título de página (celular) */
  --texto-5xl: 3.75rem;   /* 60px — título de capa (desktop) */

  --peso-normal: 400;
  --peso-medio: 500;
  --peso-semi: 600;
  --peso-forte: 700;
  --peso-extra: 800;

  --altura-linha: 1.55;
  --altura-linha-titulo: 1.1;

  /* ── Espaçamento (base 4px) ─────────────────────────────── */
  --esp-1: 0.25rem;   /* 4 */
  --esp-2: 0.5rem;    /* 8 */
  --esp-3: 0.75rem;   /* 12 */
  --esp-4: 1rem;      /* 16 */
  --esp-5: 1.25rem;   /* 20 */
  --esp-6: 1.5rem;    /* 24 */
  --esp-8: 2rem;      /* 32 */
  --esp-10: 2.5rem;   /* 40 */
  --esp-12: 3rem;     /* 48 */
  --esp-16: 4rem;     /* 64 */
  --esp-24: 6rem;     /* 96 */

  --largura-conteudo: 74rem;  /* 1184px */
  --largura-texto: 40rem;     /* ~70 caracteres no corpo */
  --alvo-toque: 44px;
}

/* Escuro: azul-marinho profundo (não preto), tons próprios validados para esse fundo. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --cor-primaria: #2563eb;
    --cor-primaria-contraste: #ffffff;
    --cor-primaria-hover: #1d4ed8;
    --cor-primaria-texto: #7aa7ff;
    --cor-primaria-suave: #16264a;
    --cor-acento: #34d399;
    --cor-acento-contraste: #052e1f;
    --cor-acento-texto: #34d399;
    --cor-acento-suave: #0d2e2a;
    --cor-acento-borda: #10b981;
    --fundo: #0b1220;
    --superficie: #111a2e;
    --superficie-2: #17223a;
    --texto: #e6ecf7;
    --texto-suave: #a3b1c9;
    --borda: #23304a;
    --borda-forte: #64758f;
    --foco: #7aa7ff;
    --sucesso: #34d399;
    --sucesso-suave: #0d2e2a;
    --alerta: #fbbf24;
    --alerta-suave: #2e2410;
    --perigo: #f87171;
    --perigo-suave: #3a1620;
    --cat-1: #3b7bf0;  --cat-1-texto: #4a89fa;
    --cat-2: #14a094;  --cat-2-texto: #14a094;
    --cat-3: #b07d22;  --cat-3-texto: #b4822b;
    --cat-4: #1b93d4;  --cat-4-texto: #1b93d4;
    --cat-5: #d9683f;  --cat-5-texto: #da6a41;
    --cat-6: #d0559f;  --cat-6-texto: #d961a8;
    --cat-7: #9161f0;  --cat-7-texto: #9c70fa;
    --cat-8: #de6585;  --cat-8-texto: #de6585;
    --cat-outros: #6b7a93;  --cat-outros-texto: #7d8ca4;
    --grafico-grade: #1c2840;
    --grafico-eixo: #34425e;
    --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 16px rgb(0 0 0 / 0.3);
    --sombra-lg: 0 2px 6px rgb(0 0 0 / 0.4), 0 24px 48px rgb(0 0 0 / 0.45);
    --vidro: rgb(23 34 58 / 0.7);
    --vidro-borda: rgb(255 255 255 / 0.1);
  }
}

/* Escolha explícita (botão de tema do app) vence o sistema nos dois sentidos. */
:root[data-theme="dark"] {
  color-scheme: dark;
  --cor-primaria: #2563eb;
  --cor-primaria-contraste: #ffffff;
  --cor-primaria-hover: #1d4ed8;
  --cor-primaria-texto: #7aa7ff;
  --cor-primaria-suave: #16264a;
  --cor-acento: #34d399;
  --cor-acento-contraste: #052e1f;
  --cor-acento-texto: #34d399;
  --cor-acento-suave: #0d2e2a;
  --cor-acento-borda: #10b981;
  --fundo: #0b1220;
  --superficie: #111a2e;
  --superficie-2: #17223a;
  --texto: #e6ecf7;
  --texto-suave: #a3b1c9;
  --borda: #23304a;
  --borda-forte: #64758f;
  --foco: #7aa7ff;
  --sucesso: #34d399;
  --sucesso-suave: #0d2e2a;
  --alerta: #fbbf24;
  --alerta-suave: #2e2410;
  --perigo: #f87171;
  --perigo-suave: #3a1620;
  --cat-1: #3b7bf0;  --cat-1-texto: #4a89fa;
  --cat-2: #14a094;  --cat-2-texto: #14a094;
  --cat-3: #b07d22;  --cat-3-texto: #b4822b;
  --cat-4: #1b93d4;  --cat-4-texto: #1b93d4;
  --cat-5: #d9683f;  --cat-5-texto: #da6a41;
  --cat-6: #d0559f;  --cat-6-texto: #d961a8;
  --cat-7: #9161f0;  --cat-7-texto: #9c70fa;
  --cat-8: #de6585;  --cat-8-texto: #de6585;
  --cat-outros: #6b7a93;  --cat-outros-texto: #7d8ca4;
  --grafico-grade: #1c2840;
  --grafico-eixo: #34425e;
  --sombra: 0 1px 2px rgb(0 0 0 / 0.4), 0 6px 16px rgb(0 0 0 / 0.3);
  --sombra-lg: 0 2px 6px rgb(0 0 0 / 0.4), 0 24px 48px rgb(0 0 0 / 0.45);
  --vidro: rgb(23 34 58 / 0.7);
  --vidro-borda: rgb(255 255 255 / 0.1);
}