/* Paleta de cores para Gráfica AMEI
 * Cores principais: Amarelo e Preto
 * Esquema complementar com tons neutros para equilíbrio
 */

:root {
  /* Cores principais */
  --primary: #FFD100;       /* Amarelo principal - vibrante e chamativo */
  --primary-light: #FFDE4D; /* Amarelo claro para hover e destaques */
  --primary-dark: #E6BC00;  /* Amarelo escuro para elementos de contraste */
  
  /* Tons de preto */
  --secondary: #1A1A1A;     /* Preto principal - quase preto para melhor legibilidade */
  --secondary-light: #333333; /* Preto mais claro para textos e elementos secundários */
  --secondary-dark: #000000;  /* Preto puro para elementos de máximo contraste */
  
  /* Cores neutras complementares */
  --neutral-light: #F5F5F5; /* Quase branco para fundos claros */
  --neutral: #E0E0E0;       /* Cinza claro para separadores e bordas */
  --neutral-dark: #9E9E9E;  /* Cinza médio para textos secundários */
  
  /* Cores de estado */
  --success: #4CAF50;       /* Verde para mensagens de sucesso */
  --warning: #FF9800;       /* Laranja para alertas */
  --error: #F44336;         /* Vermelho para erros */
  
  /* Cores de texto */
  --text-dark: #212121;     /* Para texto em fundos claros */
  --text-light: #FFFFFF;    /* Para texto em fundos escuros */
  --text-muted: #757575;    /* Para textos secundários */
  
  /* Cores de fundo */
  --bg-light: #FFFFFF;      /* Fundo branco */
  --bg-dark: #1A1A1A;       /* Fundo escuro */
  --bg-accent: #FFF9C4;     /* Fundo amarelo suave para seções de destaque */
}

/* Classes de utilidade para cores */
.bg-primary { background-color: var(--primary); }
.bg-secondary { background-color: var(--secondary); }
.bg-light { background-color: var(--bg-light); }
.bg-dark { background-color: var(--bg-dark); }
.bg-accent { background-color: var(--bg-accent); }

.text-primary { color: var(--primary); }
.text-secondary { color: var(--secondary); }
.text-light { color: var(--text-light); }
.text-dark { color: var(--text-dark); }
.text-muted { color: var(--text-muted); }

/* Gradientes */
.gradient-primary {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 100%);
}

.gradient-dark {
  background: linear-gradient(135deg, var(--secondary) 0%, var(--secondary-light) 100%);
}

.gradient-accent {
  background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
}