/* 
  ====================================================================================
  GOMUS PLAYER - ARQUIVO DE CONFIGURAÇÃO DE CORES / TEMA (style.css)
  ====================================================================================
  Você pode alterar as cores hexadecimais abaixo a qualquer momento.
  Não é necessário recompilar o player: ao editar este arquivo diretamente na pasta
  de publicação (dist/ ou public/) e recarregar a página, todas as cores mudam.
  
  ABAIXO ESTÁ O MAPEAMENTO DETALHADO DE CADA VARIÁVEL E ONDE ELA ATUA NO PLAYER:
  ====================================================================================
*/

:root, html, body, #root {
  /* 
    ----------------------------------------------------------------------------------
    1. COR PRIMÁRIA DA MARCA / CLIENTE (DESTAQUES E BOTÕES PRINCIPAIS)
    ----------------------------------------------------------------------------------
    - Botão principal de salvar/conectar ("Salvar e Conectar")
    - Botão "Receber por e-mail"
    - Botão de idioma ativo (Português / English)
    - Botão de play / pause principal no player circular
    - Barra de progresso da música em execução
    - Switches/Toggles ativados (Trava 5 músicas, Crossfade, Atualização automática)
    - Badges numéricas do cabeçalho (contador de curtidas, agendamentos, spots)
    - Botão "Atualizar Player" quando há nova versão disponível
    - Ícone e filtros ativos na Dashboard de Unidades
  */
  --brand-primary: #ff0000;
  --brand-primary-hover: #41546b;
  --brand-primary-active: #41546b;
  --brand-primary-light: rgba(65, 84, 107, 0.12);
  --brand-primary-border: rgba(65, 84, 107, 0.25);
  --brand-primary-text: #ffffff;

  /* 
    ----------------------------------------------------------------------------------
    2. FUNDO PRINCIPAL DA APLICAÇÃO (BACKGROUND GERAL)
    ----------------------------------------------------------------------------------
    - Fundo da página inteira (body, html, #root)
    - Barra de navegação superior (Header)
    - Barra de rodapé inferior (Bottom Bar)
  */
  --brand-bg: #f4f5f8;

  /* 
    ----------------------------------------------------------------------------------
    3. CARDS E PAINÉIS DO PLAYER
    ----------------------------------------------------------------------------------
    - Card esquerdo do Player (Capa do disco, barra de progresso, botões de mídia)
    - Card direito do Player (Lista e fila de reprodução, seletor de playlists)
    - Dropdown/Menu de Configurações (ao clicar na engrenagem)
  */
  --brand-card: #ffffff;
  --brand-card-hover: #ffffff;
  --brand-card-border: #ffffff;

  /* 
    ----------------------------------------------------------------------------------
    4. BOTÕES SECUNDÁRIOS, INPUTS E CAIXAS INTERNAS DO MENU DE CONFIGURAÇÕES
    ----------------------------------------------------------------------------------
    - Inputs de texto (Token, E-mail para recebimento de token)
    - Botões do menu Configurações (ex: Limpar, Atualizar Forçado, Recomeçar Download, Carregar JSON, Enviar Relatório, Baixar CSV, Instalar App)
    - Containers e caixas de seção do menu Configurações (Painel Offline, Trava, Crossfade, Idiomas, Atualizações)
    - Seletor suspenso de playlists e cabeçalhos de tabela
    - Itens da fila de reprodução (músicas normais e hover)
  */
  --brand-input-bg: #f4f5f8;
  --brand-input-border: #cbd5e1;
  --brand-btn-secondary-bg: #f4f5f8;
  --brand-btn-secondary-hover: #e2e5ea;
  --brand-btn-secondary-text: #41546b;
  --brand-btn-secondary-border: #cbd5e1;

  /* 
    ----------------------------------------------------------------------------------
    5. CORES DE TEXTO E HIERARQUIA
    ----------------------------------------------------------------------------------
    - Título da música em reprodução e logotipo Gomus Player: --brand-text
    - Artistas, tempo restante e textos secundários: --brand-text-muted
    - Acentos e links: --brand-accent
  */
  --brand-text: #ff0000;
  --brand-text-muted: #6b7280;
  --brand-accent: #ff0000;
}

/* ==================================================================================
   REGRAS DE PRIORIDADE E APLICAÇÃO DIRETA NO DOM
   ================================================================================== */

/* Fundo Geral da Página / App */
body, #root, .player-main-bg {
  background-color: var(--brand-bg, #121212) !important;
  color: var(--brand-text, #ffffff) !important;
}

/* Fundo dos Cards do Player e Menu de Configurações */
.player-card-bg {
  background-color: var(--brand-card, #181818) !important;
  border-color: var(--brand-card-border, #282828) !important;
}

/* Campos de Texto e Inputs */
.player-input {
  background-color: var(--brand-input-bg, #252525) !important;
  border-color: var(--brand-input-border, #3f3f46) !important;
  color: var(--brand-text, #ffffff) !important;
}

/* Botões Secundários */
.player-btn-secondary,
button.player-btn-secondary {
  background-color: var(--brand-btn-secondary-bg, #252525) !important;
  border-color: var(--brand-btn-secondary-border, #52525b) !important;
  color: var(--brand-btn-secondary-text, #d4d4d8) !important;
}

.player-btn-secondary:hover,
button.player-btn-secondary:hover {
  background-color: var(--brand-btn-secondary-hover, #333333) !important;
  color: var(--brand-text, #ffffff) !important;
}

/* Botões Primários / Destaques */
button.bg-\[var\(--brand-primary\)\],
[class*="bg-[var(--brand-primary)]"] {
  color: var(--brand-primary-text, #ffffff) !important;
}

/* Seções e Caixas Internas de Opções no Menu de Configurações */
.player-box-section {
  background-color: var(--brand-input-bg, #252525) !important;
  border-color: var(--brand-card-border, #282828) !important;
}

/* 
  Hierarquia Tipográfica:
  - Títulos usam --brand-text em destaque
  - Artistas e secundários usam --brand-text-muted com peso normal
*/
.player-card-bg .player-song-title {
  color: var(--brand-text, #ffffff) !important;
  font-weight: 600;
}

.player-card-bg .player-song-artist,
.player-card-bg .player-text-muted {
  color: var(--brand-text-muted, #9ca3af) !important;
  font-weight: 400 !important;
}
