/* ==================================
    SEI QUEM VENDE - ESTILOS PRINCIPAIS
    Arquivo principal que importa todos os módulos de CSS
    ================================== */
 
 /* Importação dos módulos CSS */
 @import url('./base.css');
 @import url('./layout.css');
 @import url('./components.css');
 
 /* ==================================
    ESTILOS ESPECÍFICOS DA APLICAÇÃO
    ================================== */
 
 /* Customizações específicas que não se encaixam nos módulos base */
 
 /* Animações personalizadas */
 @keyframes fadeIn {
     from {
         opacity: 0;
         transform: translateY(20px);
     }
     to {
         opacity: 1;
         transform: translateY(0);
     }
 }
 
 @keyframes slideInFromRight {
     from {
         opacity: 0;
         transform: translateX(100%);
     }
     to {
         opacity: 1;
         transform: translateX(0);
     }
 }
 
 @keyframes pulse {
     0%, 100% {
         transform: scale(1);
     }
     50% {
         transform: scale(1.05);
     }
 }
 
 /* Classes de animação */
 .fade-in {
     animation: fadeIn 0.6s ease-out;
 }
 
 .slide-in-right {
     animation: slideInFromRight 0.5s ease-out;
 }
 
 .pulse {
     animation: pulse 2s infinite;
 }
 
 /* Estados de carregamento personalizado */
 .loading-skeleton {
     background: linear-gradient(90deg, var(--gray-200) 25%, var(--gray-100) 50%, var(--gray-200) 75%);
     background-size: 200% 100%;
     animation: skeleton-loading 1.5s infinite;
 }
 
 @keyframes skeleton-loading {
     0% {
         background-position: 200% 0;
     }
     100% {
         background-position: -200% 0;
     }
 }
 
 /* Customizações específicas para o tema "Sei Quem Vende" */
 .brand-gradient {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
     -webkit-background-clip: text;
     -webkit-text-fill-color: transparent;
     background-clip: text;
 }
 
 /* Efeitos visuais especiais */
 .glass-effect {
     background: rgba(255, 255, 255, 0.95);
     backdrop-filter: blur(10px);
     border: 1px solid rgba(255, 255, 255, 0.2);
 }
 
 .gradient-border {
     border: 2px solid;
     border-image: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) 1;
 }
 
 /* Estados de hover especiais */
 .hover-lift {
     transition: var(--transition);
 }
 
 .hover-lift:hover {
     transform: translateY(-4px);
     box-shadow: var(--shadow-xl);
 }
 
 /* Customização do scrollbar */
 ::-webkit-scrollbar {
     width: 8px;
 }
 
 ::-webkit-scrollbar-track {
     background: var(--gray-100);
     border-radius: var(--border-radius-sm);
 }
 
 ::-webkit-scrollbar-thumb {
     background: var(--primary-color);
     border-radius: var(--border-radius-sm);
 }
 
 ::-webkit-scrollbar-thumb:hover {
     background: var(--primary-dark);
 }
 
 /* Firefox scrollbar */
 html {
     scrollbar-width: thin;
     scrollbar-color: var(--primary-color) var(--gray-100);
 }
 
 /* Seleção de texto personalizada */
 ::selection {
     background: var(--primary-color);
     color: var(--white);
 }
 
 ::-moz-selection {
     background: var(--primary-color);
     color: var(--white);
 }
 
 /* Foco personalizado para acessibilidade */
 *:focus-visible {
     outline: 3px solid var(--primary-color);
     outline-offset: 2px;
 }
 
 /* Estados de carregamento para imagens */
 img {
     opacity: 0;
     transition: opacity 0.3s ease;
 }
 
 img.loaded {
     opacity: 1;
 }
 
 /* Print styles */
 @media print {
     .header,
     .footer,
     .nav-toggle,
     .view-toggle,
     .modal {
         display: none !important;
     }
     
     .main {
         margin-top: 0;
     }
     
     .section {
         display: block !important;
         page-break-inside: avoid;
     }
     
     .product-card {
         break-inside: avoid;
         box-shadow: none;
         border: 1px solid var(--gray-300);
     }
 }
 
 /* Dark mode (preparação para futuro) */
 @media (prefers-color-scheme: dark) {
     .auto-dark {
         --light-color: var(--gray-900);
         --white: var(--gray-800);
         --gray-100: var(--gray-700);
         --gray-200: var(--gray-600);
         color: var(--gray-100);
         background-color: var(--gray-900);
     }
 }
 
 /* Reduced motion para acessibilidade */
 @media (prefers-reduced-motion: reduce) {
     *,
     *::before,
     *::after {
         animation-duration: 0.01ms !important;
         animation-iteration-count: 1 !important;
         transition-duration: 0.01ms !important;
     }
 }
 
 /* Alto contraste para acessibilidade */
 @media (prefers-contrast: high) {
     :root {
         --shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5);
         --shadow-lg: 0 4px 8px 0 rgba(0, 0, 0, 0.5);
         --shadow-xl: 0 8px 16px 0 rgba(0, 0, 0, 0.5);
     }
     
     .product-card,
     .category-card,
     .feature {
         border: 2px solid var(--gray-800);
     }
 }
 
 /* Utilidades específicas do projeto */
 .text-primary {
     color: var(--primary-color) !important;
 }
 
 .bg-primary {
     background-color: var(--primary-color) !important;
 }
 
 .border-primary {
     border-color: var(--primary-color) !important;
 }
 
 .gradient-bg {
     background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
 }
 
 /* Debugging (remover em produção) */
 .debug * {
     outline: 1px solid red;
 }
 
 .debug-grid {
     background-image: 
         linear-gradient(rgba(255, 0, 0, 0.1) 1px, transparent 1px),
         linear-gradient(90deg, rgba(255, 0, 0, 0.1) 1px, transparent 1px);
     background-size: 20px 20px;
 }
 
 /* Performance otimizations */
 .will-change-transform {
     will-change: transform;
 }
 
 .will-change-opacity {
     will-change: opacity;
 }
 
 /* Container queries (futuro) */
 @supports (container-type: inline-size) {
     .container-query {
         container-type: inline-size;
     }
 }