/* TOKENS SEMANTICOS - camada 2 (papeis). Componentes consomem SO estes nomes.
   Resolvem para os primitivos da paleta ativa (<html data-paleta>) e mudam com o modo (<html data-modo>).
   Sem valores de cor literais aqui: a troca de cor acontece so em paletas/. */

:root {
  /* Papeis fixos (valem nos dois modos) */
  --cor-tinta: var(--tinta-1);
  --cor-papel: var(--papel-1);
  --cor-acento-1: var(--acento-1);
  --cor-acento-2: var(--acento-2);
  --cor-acento-3: var(--acento-3);
  --cor-tinta-elevada: var(--tinta-2);
  --cor-tinta-alta: var(--tinta-3);

  /* Etiquetas, chips e selos: cor fixa por papel, texto sempre contrastado */
  --cor-tag-pendente-fundo: var(--cor-acento-3);
  --cor-tag-pendente-texto: var(--cor-tinta);
  --cor-tag-provisorio-fundo: var(--cor-acento-2);
  --cor-tag-provisorio-texto: var(--cor-tinta);
  --cor-tag-atual-fundo: var(--cor-papel);
  --cor-tag-atual-texto: var(--cor-tinta);
  --cor-chip-dj-fundo: var(--cor-acento-2);
  --cor-chip-dj-texto: var(--cor-tinta);
  --cor-chip-autoral-fundo: var(--cor-acento-1);
  --cor-chip-autoral-texto: var(--cor-papel);
  --cor-chip-remix-fundo: var(--cor-acento-3);
  --cor-chip-remix-texto: var(--cor-tinta);
  /* Player aberto: o iframe da plataforma tem tema proprio e vem claro; nao da para tematizar
     (outro dominio). Entao o cartao e de papel nos dois modos, para o widget parecer parte dele. */
  --cor-player-fundo: var(--cor-papel);
  --cor-player-linha: var(--cor-tinta);
  --cor-badge-fundo: var(--cor-acento-3);
  --cor-badge-texto: var(--cor-tinta);
  --cor-pular-fundo: var(--cor-acento-3);
  --cor-pular-texto: var(--cor-tinta);

  /* Grafismo: friso (faixa com o modulo repetido) e painel da abertura (foto em multiply + marca) */
  --cor-friso-fundo: var(--cor-tinta);
  --cor-friso-figura: var(--cor-papel);
  --cor-painel-fundo: var(--cor-acento-3);
  --cor-painel-tinta: var(--cor-tinta);
}

/* Modo claro: padrao, inclusive quando o JS nao roda */
:root, :root[data-modo="claro"] {
  --cor-superficie: var(--cor-papel);          /* fundo neutro (topo, sets, materiais) */
  --cor-texto-neutro: var(--cor-tinta);
  --cor-destaque-neutro: var(--cor-acento-1);
  --cor-superficie-escura: var(--cor-tinta);   /* abertura e barra: a coisa mais escura da pagina */
  --cor-superficie-elevada: var(--cor-tinta);  /* faixa interna (video, fotos, rodape): igual a escura no claro */
  --cor-texto-escuro: var(--cor-papel);
  --cor-destaque-escuro: var(--cor-acento-3);
}

/* Modo escuro: superficies invertidas; as cores chapadas de secao continuam, com texto ajustado */
:root[data-modo="escuro"] {
  --cor-superficie: var(--cor-tinta);
  --cor-texto-neutro: var(--cor-papel);
  --cor-destaque-neutro: var(--cor-acento-3);
  --cor-superficie-escura: var(--cor-tinta-elevada);
  /* No escuro a faixa interna sobe de verdade: sem isso ela encosta na superficie e o ritmo
     da pagina some (tinta-2 fica a 1,16:1 de tinta-1, diferenca invisivel). */
  --cor-superficie-elevada: var(--cor-tinta-alta);
  --cor-texto-escuro: var(--cor-papel);
  --cor-destaque-escuro: var(--cor-acento-3);
}