/* Cores do tema (aba Configurações). Estes valores são o tema padrão: vinho.
   public/js/tema.js troca estas variáveis quando a pessoa escolhe outra cor. */
:root {
  --c-900: #3A1D2D;   /* mais escuro (fundo do degradê) */
  --c-800: #4E283C;   /* cor da marca */
  --c-700: #5E3350;
  --c-600: #6A3652;
  --c-500: #7A4561;
  --c-400: #9A5C7C;
  --c-300: #9A6A82;
  --c-200: #E6D3DC;   /* detalhes claros */
  --c-100: #F3E8EE;   /* etiquetas e fundos suaves */
  --c-50:  #F8F2F5;   /* fundo claro do fim do degradê */
  --c-ink: #2A1620;   /* texto escuro sobre fundo claro */
  --c-muted: #6B5560; /* texto secundário */
  --on-brand: #FFFFFF;

  /* Derivados (acompanham o tema sozinhos) */
  --c-sombra: color-mix(in srgb, var(--c-900) 52%, #000);   /* sombras escuras */
  --c-borda: color-mix(in srgb, var(--c-200) 80%, var(--c-50));

  /* Cores por FUNÇÃO. Nos temas, saem da escala acima (vinho = o visual de sempre).
     As paletas (Configurações > Aparência) trocam estas diretamente, inclusive as escuras. */
  --pg1: var(--c-800); --pg2: var(--c-700); --pg3: var(--c-300); --pg4: var(--c-200); --pg5: var(--c-50); /* degradê do fundo, de cima para baixo */
  --pg-fim: #FFFFFF;     /* fim do degradê (fundo do resto da página) */
  --card: #FFFFFF;       /* cartões, painéis, menus e campos */
  --ink: color-mix(in srgb, var(--c-ink) 50%, #2c2c2c);     /* texto principal sobre o cartão */
  --muted: color-mix(in srgb, var(--c-muted) 50%, #737373); /* texto secundário */
  --num: var(--c-800);   /* títulos, números e destaques sobre o cartão */
  --tint: var(--c-100);  /* superfícies suaves (hover, chips) */
  --sup: var(--c-50);    /* superfícies bem claras dentro do cartão (botão secundário, etiquetas) */
  --sup-forte: var(--c-200);
  --linha: var(--c-borda);   /* bordas e linhas */
  --dk1: var(--c-600); --dk2: var(--c-800); /* cartões escuros em degradê */
  --dock: var(--c-800);  /* menu (dock e barra do celular) */
  --btn: var(--c-800); --btn-hover: var(--c-900); --onbtn: #FFFFFF; /* botão principal e o texto dele */
  --acc: #E8998D; --onacc: #3A1D2D; /* cor de detalhe (chip "+2 hoje", bolinhas) e o texto sobre ela */
  --acct: var(--acc);    /* detalhe como TEXTO sobre o topo escuro (kicker "PAINEL"); tema.js clareia se precisar */
  --h1: #F3E8EE; --h2: #E6D3DC; --h3: #C9A3B7; --h4: #9A5C7C; --h5: #4E283C; /* mapa de calor, do fraco ao forte */
  --bar: #D4B3C6;        /* barras de gráfico comuns (a de "hoje" usa --acc) */
  --c-hover: color-mix(in srgb, var(--tint) 70%, var(--sup-forte));
  color-scheme: light;

  /* Botões: seguem o tema/paleta, a não ser que a pessoa escolha outra cor em Configurações */
  --c-botao: var(--btn);
  --c-botao-hover: var(--btn-hover);
}