/* Blaze Brand Tailwind CSS Configuration */
/* This file contains all custom Blaze brand colors, animations, and styles */

/* Custom Blaze Colors (CSS Variables) - Specific Color Guide */
:root {
  /* Core Brand Colors - From Logo */
  --logo-black: #000000;
  --logo-white: #ffffff;
  --transparent: transparent;

  /* Specific Color Guide Implementation */
  --brand-primary: #48547C;       /* Primary brand color */
  --secondary-button: #6677ad;    /* Secondary buttons */
  --cta-button: #749DD0;          /* Call to action buttons */
  --page-background: #f2f0ef;     /* Page background */
  --card-background: #eaecf4;     /* Card backgrounds */
  --text-primary: #1e1d1c;        /* Primary text */
  --text-heading: #2c344f;        /* Headings */
  --text-secondary: #84807b;      /* Secondary text */
  --success-message: #CFE7F8;     /* Success messages */
  --border-divider: #AAA59F;      /* Borders and dividers */

  /* Semantic Mapping for Components */
  --interactive-primary: var(--brand-primary);
  --interactive-secondary: var(--secondary-button);
  --interactive-cta: var(--cta-button);
  --bg-primary: var(--page-background);
  --bg-secondary: var(--card-background);
  --bg-white: var(--logo-white);
  --border-color: var(--border-divider);
  --success-color: var(--success-message);

  /* Action Colors */
  --warning-amber: #d97706;
  --error-red: #dc2626;

  /* Gradients using the specific colors */
  --primary-gradient: linear-gradient(135deg, var(--brand-primary), var(--secondary-button));
  --cta-gradient: linear-gradient(135deg, var(--cta-button), var(--secondary-button));
  --subtle-gradient: linear-gradient(90deg, var(--bg-white), var(--card-background));
}

/* Modern Animations - Figma Color Based */
@keyframes modernPulse {
  0%, 100% {
    box-shadow: 0 0 5px rgba(72, 84, 124, 0.2), 0 0 10px rgba(72, 84, 124, 0.1);
  }
  50% {
    box-shadow: 0 0 10px rgba(72, 84, 124, 0.3), 0 0 20px rgba(72, 84, 124, 0.2);
  }
}

@keyframes sophisticatedGlow {
  0% {
    text-shadow: 0 0 5px rgba(72, 84, 124, 0.2);
  }
  100% {
    text-shadow: 0 0 10px rgba(102, 119, 173, 0.3), 0 0 15px rgba(102, 119, 173, 0.1);
  }
}

@keyframes premiumGlow {
  0% {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  100% {
    box-shadow: 0 8px 25px rgba(72, 84, 124, 0.15), 0 4px 12px rgba(0, 0, 0, 0.1);
  }
}

@keyframes lightningFlash {
  0%, 90%, 100% { opacity: 1; }
  95% { opacity: 0.7; }
}

@keyframes gentleShimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Modern Animation Classes */
.animate-modern-pulse {
  animation: modernPulse 2s infinite;
}

.animate-sophisticated-glow {
  animation: sophisticatedGlow 1.5s infinite alternate;
}

.animate-premium-glow {
  animation: premiumGlow 2s infinite alternate;
}

/* Backward Compatibility */
.animate-fresh-pulse {
  animation: modernPulse 2s infinite;
}

.animate-clean-glow {
  animation: sophisticatedGlow 1.5s infinite alternate;
}

.animate-modern-glow {
  animation: premiumGlow 2s infinite alternate;
}

.animate-gentle-pulse {
  animation: modernPulse 2s infinite;
}

.animate-soft-glow {
  animation: sophisticatedGlow 1.5s infinite alternate;
}

.animate-elegant-glow {
  animation: premiumGlow 2s infinite alternate;
}

.animate-blaze-pulse {
  animation: modernPulse 2s infinite;
}

.animate-flame-flicker {
  animation: sophisticatedGlow 1.5s infinite alternate;
}

.animate-blazing-glow {
  animation: premiumGlow 2s infinite alternate;
}

.lightning-flash {
  animation: lightningFlash 3s infinite;
}

.gentle-shimmer {
  background: linear-gradient(90deg, transparent, rgba(107, 114, 128, 0.2), transparent);
  animation: gentleShimmer 2s infinite;
}

/* Updated Background Classes */
.bg-primary-gradient {
  background: var(--primary-gradient);
}

.bg-elegant-gradient {
  background: var(--elegant-gradient);
}

.bg-subtle-gradient {
  background: var(--subtle-gradient);
}

/* Backward Compatibility */
.bg-fire-gradient {
  background: var(--primary-gradient);
}

.bg-blaze-gradient {
  background: var(--elegant-gradient);
}

.bg-hot-gradient {
  background: var(--subtle-gradient);
}

/* Updated Deal Badge */
.blaze-hot-deal {
  position: relative;
  overflow: hidden;
}

.blaze-hot-deal::before {
  content: "⭐ FEATURED";
  position: absolute;
  top: 10px;
  right: 10px;
  background: var(--primary-gradient);
  color: white;
  padding: 4px 8px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: bold;
  animation: gentlePulse 1.5s infinite;
  z-index: 10;
}

/* Elegant Border Effects */
.elegant-border {
  border: 2px solid transparent;
  background: linear-gradient(white, white) padding-box,
              var(--primary-gradient) border-box;
}

/* Updated Color Classes */
.text-primary-accent {
  color: var(--primary-accent);
}

.text-secondary-accent {
  color: var(--secondary-accent);
}

.text-soft-blue {
  color: var(--soft-blue);
}

.text-sage-green {
  color: var(--sage-green);
}

.bg-primary-accent {
  background-color: var(--primary-accent);
}

.bg-secondary-accent {
  background-color: var(--secondary-accent);
}

.bg-soft-blue {
  background-color: var(--soft-blue);
}

/* Backward Compatibility */
.text-blaze-orange {
  color: var(--primary-accent);
}

.text-blaze-red {
  color: var(--rose-pink);
}

.text-electric-blue {
  color: var(--soft-blue);
}

.bg-blaze-orange {
  background-color: var(--primary-accent);
}

.bg-blaze-red {
  background-color: var(--rose-pink);
}

.bg-electric-blue {
  background-color: var(--soft-blue);
}

/* Updated Border Colors */
.border-primary-accent {
  border-color: var(--primary-accent);
}

.border-secondary-accent {
  border-color: var(--secondary-accent);
}

.border-soft-blue {
  border-color: var(--soft-blue);
}

/* Backward Compatibility for Border Colors */
.border-blaze-orange {
  border-color: var(--primary-accent);
}

.border-blaze-red {
  border-color: var(--rose-pink);
}

.border-electric-blue {
  border-color: var(--soft-blue);
}

/* Updated Hover States */
.hover\:bg-primary-accent:hover {
  background-color: var(--primary-accent);
}

.hover\:bg-text-primary:hover {
  background-color: var(--text-primary);
}

.hover\:text-primary-accent:hover {
  color: var(--primary-accent);
}

.hover\:text-text-primary:hover {
  color: var(--text-primary);
}

.hover\:animate-elegant-glow:hover {
  animation: elegantGlow 2s infinite alternate;
}

/* Backward Compatibility for Hover States */
.hover\:bg-blaze-orange:hover {
  background-color: var(--primary-accent);
}

.hover\:bg-blaze-red:hover {
  background-color: var(--rose-pink);
}

.hover\:text-blaze-orange:hover {
  color: var(--primary-accent);
}

.hover\:text-blaze-red:hover {
  color: var(--rose-pink);
}

.hover\:animate-blazing-glow:hover {
  animation: elegantGlow 2s infinite alternate;
}

/* Blaze Typography */
.font-blaze {
  font-family: 'Orbitron', sans-serif;
}

.font-speed {
  font-family: 'Rajdhani', sans-serif;
}

.font-main {
  font-family: 'Inter', sans-serif;
}