/* Tokens do CRM. Cor, tipo, espaço e raio moram aqui e só aqui.
 *
 * Regra 60-30-10: o fundo e o painel são os 60, o preto do menu e o texto são
 * os 30, o dourado é o 10. O dourado aparece só no botão que decide e no item
 * ativo do menu. A cor do cliente (--cor-cliente) aparece só no selo da barra.
 * Cor por significado: agente = marinho, equipe = dourado-texto, atenção = aviso.
 */

:root[data-tema="claro"] {
  /* Superfícies */
  --fundo: #FDFBF6;
  --painel: #F7F1E3;
  --superficie: #FFFFFF;
  --borda: #EBE4D2;
  --borda-forte: #D9CFB6;

  /* Texto */
  --texto: #1A1A1A;
  --suave: #5C574D;
  --texto-invertido: #F7F1E3;

  /* Marca da Elevare */
  --preto: #1A1A1A;
  --preto-2: #2A2925;
  --dourado: #F5A623;
  --dourado-forte: #E0961A;
  --dourado-texto: #B67600;
  --dourado-fundo: #FFF4DA;

  /* Significado */
  --marinho: #1B2A4A;
  --marinho-fundo: #E8ECF4;
  --ok: #30A46C;
  --ok-fundo: #E3F5E9;
  --ok-texto: #1D6B3A;
  --aviso: #D9620C;
  --aviso-fundo: #FDEEDF;
  --aviso-texto: #A94A06;
  --perigo: #E5484D;
  --perigo-fundo: #FDECEC;
  --perigo-texto: #B42318;
  --simulador: #5B4B8A;
  --simulador-fundo: #EFEBF8;
  --simulador-borda: #D9D1EE;
  --marinho-borda: #CDD5E5;
  --dourado-borda: #F3D9A0;
  --branco: #FFFFFF;
  --texto-invertido-suave: rgba(247, 241, 227, 0.72);
  --veu: rgba(26, 26, 26, 0.55);

  /* Etiquetas: as cores da paleta fechada que não têm significado próprio. */
  --etq-azul-fundo: #E3EDFB;
  --etq-azul-texto: #1F4E8C;
  --etq-amarelo-fundo: #FBF3CC;
  --etq-amarelo-texto: #7A5C00;
  --etq-rosa-fundo: #FBE7F1;
  --etq-rosa-texto: #9C2A63;

  /* Cor do cliente: a casca troca pelo cliente.json (marca.cor). */
  --cor-cliente: #5C574D;

  /* Tipo: escala 12/13/14/16/20/24/32 */
  --fonte-titulo: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fonte-corpo: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-16: 16px;
  --t-20: 20px;
  --t-24: 24px;
  --t-32: 32px;

  /* Espaço: múltiplos de 4 */
  --e-1: 4px;
  --e-2: 8px;
  --e-3: 12px;
  --e-4: 16px;
  --e-5: 20px;
  --e-6: 24px;
  --e-8: 32px;
  --e-10: 40px;

  /* Forma */
  --raio-p: 6px;
  --raio: 10px;
  --raio-g: 14px;
  --pilula: 999px;
  --sombra: 0 1px 2px rgba(26, 26, 26, 0.06), 0 4px 16px rgba(26, 26, 26, 0.06);
  --sombra-forte: 0 8px 32px rgba(26, 26, 26, 0.18);
  --sombra-leve: 0 1px 2px rgba(26, 26, 26, 0.05);
  --alvo-toque: 32px;

  /* Medidas da casca */
  --menu-largura: 216px;
  --barra-altura: 56px;
  --barra-inferior: 60px;
}