/**
 * ===== TEMA ULTRAGAZ - CSS OVERRIDE =====
 * Paleta oficial de cores Ultragaz
 * Carregue este arquivo APÓS todos os outros CSS para sobrescrever cores
 *
 * Cores:
 * - Azul Primary: #000FFF
 * - Cian Accent: #00FFFF
 * - Verde Action: #00FF00
 * - Cinza Neutral: #BBBCBC
 * - Branco: #FFFFFF
 * - Preto: #000000
 *
 * Gradientes:
 * - Blue to Cyan: linear-gradient(to right, #000FFF, #00FFFF)
 * - Green to Cyan: linear-gradient(to right, #00FF00, #00FFFF)
 */

/* ===== CSS VARIABLES (TOKENS) ===== */
:root {
  /* Cores Sólidas Ultragaz */
  --ultragaz-blue: #000FFF;
  --ultragaz-cyan: #00FFFF;
  --ultragaz-green: #00FF00;
  --ultragaz-gray: #BBBCBC;
  --ultragaz-white: #FFFFFF;
  --ultragaz-black: #000000;
  
  /* Gradientes Oficiais */
  --ultragaz-gradient-blue-cyan: linear-gradient(to right, #000FFF, #00FFFF);
  --ultragaz-gradient-green-cyan: linear-gradient(to right, #00FF00, #00FFFF);
  --ultragaz-gradient-hero: linear-gradient(135deg, #000FFF 0%, #00BFFF 50%, #00FFFF 100%);
  
  /* Mapeamento de Cores do Tema */
  --primary-color: #000FFF;
  --primary-color-light: #3366FF;
  --primary-color-dark: #0000CC;
  --primary-gradient: linear-gradient(135deg, #000FFF 0%, #00FFFF 100%);
  
  --secondary-color: #00FFFF;
  --secondary-color-light: #66FFFF;
  --secondary-color-dark: #00CCCC;
  
  --accent-color: #00FF00;
  --accent-gradient: linear-gradient(135deg, #00FF00 0%, #00FFFF 100%);
  
  --neutral-color: #BBBCBC;
  --border-color: #BBBCBC;
  
  --text-dark: #000000;
  --text-light: rgba(0, 0, 0, 0.7);
  --text-muted: rgba(0, 0, 0, 0.55);
  
  --white: #FFFFFF;
  --black: #000000;
  
  /* Sombras e Efeitos */
  --shadow-glow: 0 0 30px rgba(0, 15, 255, 0.4);
  --shadow-glow-cyan: 0 0 30px rgba(0, 255, 255, 0.4);
  --shadow-glow-green: 0 0 30px rgba(0, 255, 0, 0.4);
  
  /* Focus Ring */
  --focus-ring: 0 0 0 3px rgba(0, 255, 255, 0.4);
}

/* ===== OVERRIDE DE ANIMAÇÕES ===== */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(0, 15, 255, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(0, 15, 255, 0.8);
  }
}

/* ===== GRADIENTES DE TEXTO ===== */
.gradient-text {
  background: var(--ultragaz-gradient-blue-cyan) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

/* ===== LOADING SPINNER ===== */
.loading::after {
  border-top-color: var(--ultragaz-blue) !important;
}

/* ===== FOCUS STATES ===== */
.focus-ring:focus,
input:focus,
textarea:focus,
select:focus,
button:focus {
  outline: none !important;
  box-shadow: var(--focus-ring) !important;
  border-color: var(--ultragaz-cyan) !important;
}

/* ===== LINKS ===== */
a {
  color: var(--ultragaz-blue);
  transition: color 0.3s ease;
}

a:hover {
  color: var(--ultragaz-cyan);
}

a:visited {
  color: var(--ultragaz-blue);
}

/* ===== BOTÕES PRIMARY ===== */
.btn-primary,
button[type="submit"],
.bg-primary-500,
.bg-green-500,
.bg-green-600 {
  background: var(--ultragaz-green) !important;
  color: var(--ultragaz-black) !important;
}

.btn-primary:hover,
button[type="submit"]:hover,
.bg-primary-500:hover,
.bg-green-500:hover,
.bg-green-600:hover {
  background: var(--ultragaz-gradient-green-cyan) !important;
  box-shadow: var(--shadow-glow-green) !important;
}

/* ===== BOTÕES SECONDARY ===== */
.btn-secondary,
.bg-secondary-500,
.bg-blue-600 {
  background: var(--ultragaz-blue) !important;
  color: var(--ultragaz-white) !important;
}

.btn-secondary:hover,
.bg-secondary-500:hover,
.bg-blue-600:hover {
  background: var(--ultragaz-gradient-blue-cyan) !important;
  box-shadow: var(--shadow-glow) !important;
}

/* ===== BOTÕES WHATSAPP ===== */
.btn-whatsapp {
  background: var(--ultragaz-gradient-green-cyan) !important;
  color: var(--ultragaz-black) !important;
}

.btn-whatsapp:hover {
  box-shadow: var(--shadow-glow-green) !important;
}

/* ===== BOTÕES OUTLINE ===== */
.btn-outline {
  background: transparent !important;
  border: 2px solid var(--ultragaz-cyan) !important;
  color: var(--ultragaz-blue) !important;
}

.btn-outline:hover {
  background: var(--ultragaz-cyan) !important;
  color: var(--ultragaz-black) !important;
}

/* ===== CARDS E SUPERFÍCIES ===== */
.produto-card,
.card,
.bg-white {
  background: var(--ultragaz-white) !important;
  border-color: var(--ultragaz-gray) !important;
}

.produto-card::before,
.card::before {
  background: var(--ultragaz-gradient-blue-cyan) !important;
}

/* ===== HERO SECTION ===== */
.hero::before {
  background: linear-gradient(
    135deg,
    rgba(0, 15, 255, 0.9) 0%,
    rgba(0, 100, 200, 0.8) 50%,
    rgba(0, 255, 255, 0.7) 100%
  ) !important;
}

/* ===== BADGES E STATUS ===== */
.bg-green-100 {
  background: rgba(0, 255, 0, 0.2) !important;
}

.text-green-800,
.text-green-600 {
  color: #006600 !important;
}

.bg-blue-100 {
  background: rgba(0, 15, 255, 0.1) !important;
}

.text-blue-800,
.text-blue-600 {
  color: var(--ultragaz-blue) !important;
}

/* ===== FORMULÁRIOS ===== */
input,
textarea,
select {
  border-color: var(--ultragaz-gray) !important;
}

input:focus,
textarea:focus,
select:focus {
  border-color: var(--ultragaz-cyan) !important;
  box-shadow: 0 0 0 3px rgba(0, 255, 255, 0.25) !important;
}

input::placeholder,
textarea::placeholder {
  color: var(--text-muted) !important;
}

/* ===== SECTION TITLES ===== */
.section-title h2::after {
  background: var(--ultragaz-gradient-blue-cyan) !important;
}

/* ===== FOOTER ===== */
/* Footer principal com degradê verde-ciano */
.footer,
footer {
  background: linear-gradient(to right, #00FF00, #00FFFF) !important;
}

footer a:hover {
  color: var(--ultragaz-white) !important;
}

/* Títulos do footer em PRETO para contraste com fundo verde-ciano */
footer h4,
footer h3 {
  color: #000000 !important;
}

/* Ícones de contato do footer - NÃO afeta redes sociais */
footer .bg-white\/20 {
  background: #FFFFFF !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

footer .bg-white\/20 i,
footer .bg-white\/20 svg {
  color: #000FFF !important;
}

/* Linha final do rodapé - preto */
footer + div,
.rodape-final {
  background: var(--ultragaz-black) !important;
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar-thumb {
  background: var(--ultragaz-gray) !important;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ultragaz-blue) !important;
}

/* ===== RING COLORS (TAILWIND OVERRIDE) ===== */
.ring-primary-500,
.focus\:ring-primary-500:focus {
  --tw-ring-color: var(--ultragaz-cyan) !important;
}

.ring-green-500,
.focus\:ring-green-500:focus {
  --tw-ring-color: var(--ultragaz-cyan) !important;
}

/* ===== BORDER COLORS ===== */
.border-primary-500,
.border-red-500 {
  border-color: var(--ultragaz-blue) !important;
}

.border-green-500 {
  border-color: var(--ultragaz-green) !important;
}

.border-gray-200,
.border-gray-300 {
  border-color: var(--ultragaz-gray) !important;
}

/* ===== HOVER EFFECTS ===== */
.hover\:bg-green-700:hover,
.hover\:bg-green-600:hover {
  background: var(--ultragaz-gradient-green-cyan) !important;
}

.hover\:bg-blue-700:hover,
.hover\:bg-primary-600:hover {
  background: var(--ultragaz-gradient-blue-cyan) !important;
}

/* ===== TEXT COLORS ===== */
.text-primary-500,
.text-primary-600,
.text-red-500,
.text-red-600 {
  color: var(--ultragaz-blue) !important;
}

.text-secondary-500,
.text-blue-500,
.text-blue-600 {
  color: var(--ultragaz-blue) !important;
}

/* ===== BACKGROUND GRADIENTS ===== */
.bg-gradient-to-r.from-primary-500,
.bg-gradient-to-r.from-red-500 {
  background: var(--ultragaz-gradient-blue-cyan) !important;
}

.bg-gradient-to-br.from-primary-500 {
  background: var(--ultragaz-gradient-blue-cyan) !important;
}

/* ===== ICONS ===== */
.text-primary-500 i,
.text-red-500 i,
i.text-primary-500,
i.text-red-500 {
  color: var(--ultragaz-cyan) !important;
}

/* ===== DISABLED STATES ===== */
button:disabled,
input:disabled,
.disabled {
  background: var(--ultragaz-gray) !important;
  color: var(--ultragaz-black) !important;
  opacity: 0.6 !important;
}

/* ===== SHADOW COLORS ===== */
.shadow-primary-500\/20,
.shadow-red-500\/20 {
  --tw-shadow-color: rgba(0, 15, 255, 0.2) !important;
}

/* ===== ANIMATIONS OVERRIDE ===== */
@keyframes flame-flicker {
  0%, 100% {
    filter: drop-shadow(0 0 8px rgba(0, 15, 255, 0.4)) brightness(1);
  }
  50% {
    filter: drop-shadow(0 0 12px rgba(0, 255, 255, 0.6)) brightness(1.05);
  }
}

/* ===== MOBILE RESPONSIVE ===== */
@media (max-width: 768px) {
  .hero::before {
    background: linear-gradient(
      180deg,
      rgba(0, 15, 255, 0.95) 0%,
      rgba(0, 100, 200, 0.85) 50%,
      rgba(0, 255, 255, 0.8) 100%
    ) !important;
  }
}

/* ===== PRINT STYLES ===== */
@media print {
  * {
    color: var(--ultragaz-black) !important;
    background: var(--ultragaz-white) !important;
  }
}