/* Tokens de design do CRM v2 · Grand Hall Raja e Espaço Raja (base: direção B, com os ajustes da UI-DECISAO)
   Uma fonte de verdade para cor, tipo, espaço, raio e sombra. As telas só usam var(--...).
   Modo escuro: [data-tema="escuro"] no <html> (o app escolhe pelo aparelho e guarda a escolha da pessoa).
   Cores dos espaços: as mesmas de lib/regras.js (ESPACOS.*.cor). O api.js reaplica as que chegam no
   vocabulário do /api/estado, então mudar lá muda aqui. Contraste conferido: texto >= 4,5:1 onde aparece. */

:root {
  color-scheme: light;

  /* Superfícies */
  --fundo: #F9F8F6;
  --fundo-2: #F3F0EA;
  --fundo-3: #ECE7DE;
  --cartao: #FFFFFF;
  --cartao-2: #FBFAF7;
  --cartao-elevado: #FFFFFF;
  --veu: rgba(28, 24, 20, .42);

  /* Linhas */
  --linha: #E6DFD3;
  --linha-forte: #D6CCBC;
  --linha-suave: #EFEAE1;
  --linha-campo: #968A79;      /* borda de campo e caixa de marcar: 3,2:1 sobre o cartão (componente de interface) */

  /* Tinta */
  --tinta: #2A2622;            /* 14,1:1 */
  --tinta-2: #5E554B;          /* 6,4:1 */
  --tinta-3: #6E6458;          /* 5,2:1 no fundo-2, o pior fundo */
  --tinta-inversa: #F9F8F6;

  /* Marca: ouro com parcimônia (destaque, foco, item ativo). Não é cor de espaço. */
  --ouro: #A8884A;
  --ouro-suave: #E4D3AE;
  --ouro-lavado: #F5EEDF;
  --ouro-texto: #7E6230;       /* 4,9:1 no lavado, 5,6:1 no fundo */
  --ouro-forte: #7E6230;

  /* Espaços (lib/regras.js): selo cheio, nome sempre escrito.
     Grand Hall terracota escuro com texto branco (8,8:1); Raja oliva claro com texto escuro (5,5:1). */
  --esp-gh: #7E3416;
  --esp-gh-texto: #FFFFFF;
  --esp-raja: #9CA25E;
  --esp-raja-texto: #1E2110;
  --esp-gh-lavado: #F4E6E0;    /* fundo de destaque leve na cor do espaço (cartão de data, agenda) */
  --esp-raja-lavado: #EEF0E0;
  --esp-gh-linha: #7E3416;     /* faixa e anel */
  --esp-raja-linha: #8A9050;
  --esp-definir: #9A9187;

  /* Estados (sempre com ícone e texto, nunca só a cor) */
  --ok: #2B7049;        --ok-fundo: #E4F1E8;
  --atencao: #84560D;   --atencao-fundo: #F8EDD7;
  --perigo: #A3372A;    --perigo-fundo: #F8E3DE;
  --info: #3C5A78;      --info-fundo: #E6EDF4;
  --nota: #6B5310;      --nota-fundo: #FBF3D2;   /* nota interna: só a equipe vê */

  /* Etapas do funil: rampa dourada do claro ao escuro (posição na jornada) */
  --etapa-1: #DFCDA0; --etapa-2: #D4BC83; --etapa-3: #CDB06C; --etapa-4: #BC9A51;
  --etapa-5: #A7843E; --etapa-6: #8F6E31; --etapa-7: #765A27; --etapa-8: #2B7049;

  /* Rampa sequencial (mapa de calor) */
  --seq-1: #F7F1E3; --seq-2: #EEDFBF; --seq-3: #E0C793; --seq-4: #CBAA67; --seq-5: #AE8A45; --seq-6: #8A6B31; --seq-7: #654D22;
  --seq-texto-claro: #2A2622; --seq-texto-escuro: #FFFFFF;

  /* Gráficos: espaços com as mesmas cores do selo; "outro" neutro de propósito */
  --viz-gh: #7E3416; --viz-raja: #9CA25E; --viz-outro: #9A9187;
  --viz-1: #CDB06C; --viz-2: #BC9A51; --viz-3: #A7843E; --viz-4: #8F6E31; --viz-5: #765A27;
  --viz-grade: #EFEAE1; --viz-eixo: #D6CCBC;

  /* Bolhas da conversa */
  --bolha-equipe: #2A2622; --bolha-equipe-texto: #F9F8F6;
  --bolha-robo: #F5EEDF; --bolha-robo-borda: #E4D3AE;

  /* Foco: anel de 2 px, 4,8:1 sobre o fundo */
  --foco: #7E6230;

  /* Sombras quentes e baixas */
  --sombra-1: 0 1px 2px rgba(42, 38, 34, .05);
  --sombra-2: 0 1px 2px rgba(42, 38, 34, .04), 0 12px 32px -16px rgba(42, 38, 34, .20);
  --sombra-3: 0 28px 70px -24px rgba(30, 24, 18, .38);

  /* Tipografia */
  --serif: 'Cormorant Garamond', 'Cormorant', Garamond, 'Times New Roman', serif;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  --t-display: 44px;
  --t-titulo: 34px;
  --t-secao: 22px;
  --t-cartao: 17px;
  --t-corpo: 14px;
  --t-apoio: 13px;
  --t-mini: 12px;
  --t-rotulo: 11px;

  /* Espaço (base 4) */
  --e-1: 4px; --e-2: 8px; --e-3: 12px; --e-4: 16px; --e-5: 20px; --e-6: 24px; --e-7: 32px; --e-8: 40px; --e-9: 56px;

  /* Raios */
  --r-1: 6px; --r-2: 10px; --r-3: 14px; --r-4: 20px; --r-pilula: 999px;

  /* Alvos: 24 px no computador, 44 px no toque (ajuste 7) */
  --alvo: 32px;
  --alvo-min: 24px;

  /* Casca */
  --menu-larg: 260px;
  --menu-rec: 76px;
  --barra-movel: 60px;

  /* Movimento */
  --curva: cubic-bezier(.2, .7, .2, 1);
  --rapido: .16s;
  --medio: .28s;
}

[data-tema="escuro"] {
  color-scheme: dark;

  --fundo: #151311;
  --fundo-2: #1A1715;
  --fundo-3: #25211D;
  --cartao: #1F1C19;
  --cartao-2: #26221E;
  --cartao-elevado: #26221F;
  --veu: rgba(0, 0, 0, .58);

  --linha: #332E28;
  --linha-forte: #463F37;
  --linha-suave: #2A2622;
  --linha-campo: #7F7569;

  --tinta: #F1ECE4;
  --tinta-2: #C9BFB2;
  --tinta-3: #A59B8F;
  --tinta-inversa: #151311;

  --ouro: #C6A75C;
  --ouro-suave: #4A3E24;
  --ouro-lavado: rgba(198, 167, 92, .13);
  --ouro-texto: #D8BC7C;
  --ouro-forte: #C6A75C;

  /* selo igual nos dois temas (uma cor por espaço em todo lugar); só a faixa e o anel clareiam um pouco */
  --esp-gh-lavado: rgba(166, 74, 40, .20);
  --esp-raja-lavado: rgba(156, 162, 94, .16);
  --esp-gh-linha: #B4572F;
  --esp-raja-linha: #A9AF6A;
  --esp-definir: #857B70;

  --ok: #6FBF8E;        --ok-fundo: rgba(111, 191, 142, .12);
  --atencao: #E2B25E;   --atencao-fundo: rgba(226, 178, 94, .13);
  --perigo: #EC8B7A;    --perigo-fundo: rgba(236, 139, 122, .13);
  --info: #8FB1D6;      --info-fundo: rgba(143, 177, 214, .12);
  --nota: #E9D27E;      --nota-fundo: rgba(233, 210, 126, .11);

  --etapa-1: #4A3F2A; --etapa-2: #615032; --etapa-3: #7A643A; --etapa-4: #937942;
  --etapa-5: #AD8F4C; --etapa-6: #C6A75C; --etapa-7: #DCC082; --etapa-8: #6FBF8E;

  --seq-1: #2A251E; --seq-2: #3A3124; --seq-3: #51432A; --seq-4: #6E5A33; --seq-5: #A08647; --seq-6: #B8984F; --seq-7: #D9BD78;
  --seq-texto-claro: #F1ECE4; --seq-texto-escuro: #151311;

  --viz-gh: #B4572F; --viz-raja: #A9AF6A; --viz-outro: #857B70;
  --viz-1: #7A643A; --viz-2: #937942; --viz-3: #AD8F4C; --viz-4: #C6A75C; --viz-5: #DCC082;
  --viz-grade: #2A2622; --viz-eixo: #463F37;

  --foco: #C6A75C;

  --bolha-equipe: #3D3222; --bolha-equipe-texto: #F1ECE4;
  --bolha-robo: #26211B; --bolha-robo-borda: #4A3E24;

  --sombra-1: 0 1px 2px rgba(0, 0, 0, .35);
  --sombra-2: 0 1px 2px rgba(0, 0, 0, .3), 0 14px 34px -16px rgba(0, 0, 0, .7);
  --sombra-3: 0 28px 70px -24px rgba(0, 0, 0, .8);
}

/* Toque (celular e tablet): alvo de 44 px */
@media (pointer: coarse), (max-width: 760px) {
  :root { --alvo: 44px; --alvo-min: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :root { --rapido: 0s; --medio: 0s; }
}