/**
 * Tema Personalizado - Loja de Suplementos
 * 
 * Este arquivo sobrescreve as variáveis CSS do tema global
 * para criar um tema preto e cinza personalizado.
 */

:root {
  /* Cores Principais - Preto e Cinza */
  --color-primary: #1a1a1a;        /* Preto principal */
  --color-secondary: #404040;      /* Cinza escuro */
  
  /* Cores de Fundo - Claro com tom cinza */
  --color-bg: #f5f5f5;           /* Fundo claro cinza */
  --color-card: #ffffff;         /* Branco para cards */
  --color-card-glass: rgba(245, 245, 245, 0.75); /* Glass effect - cinza claro */
  
  /* Cores de Texto */
  --color-text: #171717;         /* Texto escuro preto */
  --color-text-secondary: #404040; /* Cinza - Texto secundário */
  --color-text-muted: #737373;   /* Texto desabilitado cinza */
  
  /* Cores de Botões - Preto */
  --color-button: #1a1a1a;       /* Preto - Botão */
  --color-button-hover: #262626; /* Preto mais claro - Hover do botão */
  --color-button-text: #ffffff;  /* Branco - Texto do botão */
  
  /* Cores de Borda - Cinza */
  --color-border: rgba(209, 213, 219, 0.3); /* Cinza com transparência */
  --color-border-light: rgba(255, 255, 255, 0.5); /* Branco com mais opacidade */
  
  /* Cores de Glass Effect - Cinza */
  --color-glass-bg: rgba(245, 245, 245, 0.75); /* Fundo glass cinza */
  --color-glass-border: rgba(255, 255, 255, 0.4); /* Borda glass */
  
  /* Cores de Estados (mantém padrão) */
  --color-success: #10b981;      /* green-500 - Sucesso */
  --color-error: #ef4444;        /* red-500 - Erro */
  --color-warning: #f59e0b;      /* yellow-500 - Aviso */
  
  /* Cores de Paginação - Preto */
  --color-pagination-active: #1a1a1a; /* Botão ativo preto */
  --color-pagination-hover: #f5f5f5; /* Hover cinza claro */
  
  /* Cores de Modal - Preto */
  
  /* Cores de Sidebar - Cinza */
  --color-sidebar-bg: rgba(245, 245, 245, 0.75); /* Fundo da sidebar cinza */
  --color-sidebar-item-bg: rgba(255, 255, 255, 0.5); /* Item da sidebar */
  
  /* Cores de Notificação - Mantém padrão do sistema (cinza) */
  --color-notification-success: #10b981; /* Ícone de sucesso (mantém verde) */
}