/* ============================================
   COLOR VARIABLES
   Based on color-definitions.md structure
   ============================================ */

/* Force repaint on theme change */
html.theme-changing * {
  transition: background-color 0.01s, color 0.01s, border-color 0.01s;
}

:root {
  /* Primary Colors (Indigo) */
  --Primary-50: #eef2ff;
  --Primary-100: #e0e7ff;
  --Primary-200: #c7d2fe;
  --Primary-300: #a5b4fc;
  --Primary-400: #818cf8;
  --Primary-500: #6366f1;
  --Primary-600: #4f46e5;
  --Primary-700: #4338ca;

  /* Secondary Colors (Violet) */
  --Secondary-300: #c4b5fd;
  --Secondary-400: #a78bfa;
  --Secondary-500: #8b5cf6;
  --Secondary-600: #7c3aed;
  --Secondary-700: #6d28d9;

  /* Neutral Colors (Slate) */
  --Neutral-50: #f8fafc;
  --Neutral-100: #f1f5f9;
  --Neutral-200: #e2e8f0;
  --Neutral-300: #cbd5e1;
  --Neutral-400: #94a3b8;
  --Neutral-500: #64748b;
  --Neutral-600: #475569;
  --Neutral-700: #334155;
  --Neutral-800: #1e293b;
  --Neutral-900: #0f172a;

  /* Neutral Colors (Gray - for compatibility) */
  --Neutral-Gray-50: #f9fafb;
  --Neutral-Gray-200: #e5e7eb;

  /* Success Colors (Green) */
  --Success-Light: #dcfce7;
  --Success: #16a34a;
  --Success-Dark: #15803d;

  /* Error Colors (Red) */
  --Error-Light: #fee2e2;
  --Error: #dc2626;
  --Error-Dark: #b91c1c;

  /* Warning Colors (Yellow) */
  --Warning-Light: #fef3c7;
  --Warning: #eab308;
  --Warning-Dark: #ca8a04;

  /* Info Colors (Blue) */
  --Info-Light: #dbeafe;
  --Info: #2563eb;
  --Info-Dark: #1d4ed8;

  /* Accent Colors (Amber) */
  --Accent-Amber-400: #fbbf24;
  --Accent-Yellow-300: #fde047;
  --Accent-Yellow-400: #facc15;
  --Accent-Yellow-500: #eab308;

  /* White */
  --White: #ffffff;
}

/* ============================================
   GLOBAL STYLES
   ============================================ */

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

/* ============================================
   BACKGROUND PATTERNS
   ============================================ */

.bg-grid {
  background-image: radial-gradient(circle, var(--Neutral-Gray-200) 1px, transparent 1px);
  background-size: 20px 20px;
}

/* ============================================
   ANIMATIONS
   ============================================ */

.animate-float {
  animation: float 6s ease-in-out infinite;
}

@keyframes float {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}

.animate-pulse {
  animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.5;
  }
}

/* ============================================
   COMPONENT PREVIEW STYLES
   ============================================ */

.component-preview {
  transform: scale(0.8);
  transform-origin: top left;
  max-height: 200px;
  overflow: hidden;
}

.preview-container {
  font-size: 10px;
}

/* ============================================
   HIGHLIGHT RING FOR ADMIN INTERFACE
   ============================================ */

.ring-2 {
  box-shadow: 0 0 0 2px var(--Accent-Yellow-400), 0 0 0 4px rgba(250, 204, 21, 0.3);
}

/* ============================================
   UTILITY CLASSES USING CSS VARIABLES
   These can be used alongside Tailwind classes
   ============================================ */

/* Primary Color Utilities */
.bg-primary-50 { background-color: var(--Primary-50); }
.bg-primary-100 { background-color: var(--Primary-100); }
.bg-primary-200 { background-color: var(--Primary-200); }
.bg-primary-300 { background-color: var(--Primary-300); }
.bg-primary-400 { background-color: var(--Primary-400); }
.bg-primary-500 { background-color: var(--Primary-500); }
.bg-primary-600 { background-color: var(--Primary-600); }
.bg-primary-700 { background-color: var(--Primary-700); }

.text-primary-50 { color: var(--Primary-50); }
.text-primary-100 { color: var(--Primary-100); }
.text-primary-200 { color: var(--Primary-200); }
.text-primary-300 { color: var(--Primary-300); }
.text-primary-400 { color: var(--Primary-400); }
.text-primary-500 { color: var(--Primary-500); }
.text-primary-600 { color: var(--Primary-600); }
.text-primary-700 { color: var(--Primary-700); }

.border-primary-50 { border-color: var(--Primary-50); }
.border-primary-100 { border-color: var(--Primary-100); }
.border-primary-200 { border-color: var(--Primary-200); }
.border-primary-300 { border-color: var(--Primary-300); }
.border-primary-400 { border-color: var(--Primary-400); }
.border-primary-500 { border-color: var(--Primary-500); }
.border-primary-600 { border-color: var(--Primary-600); }
.border-primary-700 { border-color: var(--Primary-700); }

/* Secondary Color Utilities */
.bg-secondary-300 { background-color: var(--Secondary-300); }
.bg-secondary-400 { background-color: var(--Secondary-400); }
.bg-secondary-500 { background-color: var(--Secondary-500); }
.bg-secondary-600 { background-color: var(--Secondary-600); }
.bg-secondary-700 { background-color: var(--Secondary-700); }

.text-secondary-300 { color: var(--Secondary-300); }
.text-secondary-400 { color: var(--Secondary-400); }
.text-secondary-500 { color: var(--Secondary-500); }
.text-secondary-600 { color: var(--Secondary-600); }
.text-secondary-700 { color: var(--Secondary-700); }

/* Neutral Color Utilities */
.bg-neutral-50 { background-color: var(--Neutral-50); }
.bg-neutral-100 { background-color: var(--Neutral-100); }
.bg-neutral-200 { background-color: var(--Neutral-200); }
.bg-neutral-300 { background-color: var(--Neutral-300); }
.bg-neutral-400 { background-color: var(--Neutral-400); }
.bg-neutral-500 { background-color: var(--Neutral-500); }
.bg-neutral-600 { background-color: var(--Neutral-600); }
.bg-neutral-700 { background-color: var(--Neutral-700); }
.bg-neutral-800 { background-color: var(--Neutral-800); }
.bg-neutral-900 { background-color: var(--Neutral-900); }

.text-neutral-50 { color: var(--Neutral-50); }
.text-neutral-100 { color: var(--Neutral-100); }
.text-neutral-200 { color: var(--Neutral-200); }
.text-neutral-300 { color: var(--Neutral-300); }
.text-neutral-400 { color: var(--Neutral-400); }
.text-neutral-500 { color: var(--Neutral-500); }
.text-neutral-600 { color: var(--Neutral-600); }
.text-neutral-700 { color: var(--Neutral-700); }
.text-neutral-800 { color: var(--Neutral-800); }
.text-neutral-900 { color: var(--Neutral-900); }

.border-neutral-50 { border-color: var(--Neutral-50); }
.border-neutral-100 { border-color: var(--Neutral-100); }
.border-neutral-200 { border-color: var(--Neutral-200); }
.border-neutral-300 { border-color: var(--Neutral-300); }
.border-neutral-400 { border-color: var(--Neutral-400); }
.border-neutral-500 { border-color: var(--Neutral-500); }
.border-neutral-600 { border-color: var(--Neutral-600); }
.border-neutral-700 { border-color: var(--Neutral-700); }
.border-neutral-800 { border-color: var(--Neutral-800); }
.border-neutral-900 { border-color: var(--Neutral-900); }

/* Success Color Utilities */
.bg-success-light { background-color: var(--Success-Light); }
.bg-success { background-color: var(--Success); }
.bg-success-dark { background-color: var(--Success-Dark); }

.text-success-light { color: var(--Success-Light); }
.text-success { color: var(--Success); }
.text-success-dark { color: var(--Success-Dark); }

/* Error Color Utilities */
.bg-error-light { background-color: var(--Error-Light); }
.bg-error { background-color: var(--Error); }
.bg-error-dark { background-color: var(--Error-Dark); }

.text-error-light { color: var(--Error-Light); }
.text-error { color: var(--Error); }
.text-error-dark { color: var(--Error-Dark); }

/* Warning Color Utilities */
.bg-warning-light { background-color: var(--Warning-Light); }
.bg-warning { background-color: var(--Warning); }
.bg-warning-dark { background-color: var(--Warning-Dark); }

.text-warning-light { color: var(--Warning-Light); }
.text-warning { color: var(--Warning); }
.text-warning-dark { color: var(--Warning-Dark); }

/* Info Color Utilities */
.bg-info-light { background-color: var(--Info-Light); }
.bg-info { background-color: var(--Info); }
.bg-info-dark { background-color: var(--Info-Dark); }

.text-info-light { color: var(--Info-Light); }
.text-info { color: var(--Info); }
.text-info-dark { color: var(--Info-Dark); }

/* Accent Color Utilities */
.bg-accent-amber-400 { background-color: var(--Accent-Amber-400); }
.bg-accent-yellow-300 { background-color: var(--Accent-Yellow-300); }
.bg-accent-yellow-400 { background-color: var(--Accent-Yellow-400); }
.bg-accent-yellow-500 { background-color: var(--Accent-Yellow-500); }

.text-accent-amber-400 { color: var(--Accent-Amber-400); }
.text-accent-yellow-300 { color: var(--Accent-Yellow-300); }
.text-accent-yellow-400 { color: var(--Accent-Yellow-400); }
.text-accent-yellow-500 { color: var(--Accent-Yellow-500); }

/* Wizard Button Animations */
@keyframes gradient {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shine {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(200%) translateY(200%) rotate(45deg);
  }
}

.wizard-button {
  background-size: 200% 200%;
}

.wizard-button .animate-gradient {
  background: linear-gradient(
    -45deg,
    var(--Accent-Yellow-400),
    var(--Accent-Yellow-300),
    var(--Primary-400),
    var(--Primary-500),
    var(--Accent-Yellow-400)
  );
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
}

.wizard-button .bg-shine {
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.5) 50%,
    transparent 70%
  );
  width: 100%;
  height: 100%;
}

.wizard-button .animate-shine {
  animation: shine 2s ease-in-out infinite;
}

.wizard-button .wizard-gradient-amber {
  background: linear-gradient(
    -45deg,
    #f59e0b,
    #fbbf24,
    #facc15,
    #f59e0b
  );
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
}

/* Plan Wizard CTA Button Shine Effects */
@keyframes gradient-shine {
  0%, 100% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
}

@keyframes shine-sweep {
  0% {
    transform: translateX(-100%) translateY(-100%) rotate(45deg);
  }
  100% {
    transform: translateX(200%) translateY(200%) rotate(45deg);
  }
}

.wizard-cta-button {
  background-size: 200% 200%;
}

.wizard-cta-button .animate-gradient-shine {
  background-size: 200% 200%;
  animation: gradient-shine 3s ease infinite;
}

.wizard-cta-button .bg-shine-overlay {
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 70%
  );
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.wizard-cta-button .animate-shine-sweep {
  animation: shine-sweep 3s infinite;
}

/* Hero CTA Button - Gradient + Shine */
.hero-cta-button {
  background-color: #4f46e5; /* fallback if gradient layer fails */
  background-size: 200% 200%;
}

.hero-cta-button .animate-gradient-hero {
  background: linear-gradient(
    -45deg,
    var(--Primary-600),
    var(--Primary-500),
    #7c3aed,
    #8b5cf6,
    var(--Primary-600)
  );
  background-size: 400% 400%;
  animation: gradient 3s ease infinite;
}

.hero-cta-button .bg-shine-hero {
  background: linear-gradient(
    45deg,
    transparent 30%,
    rgba(255, 255, 255, 0.35) 50%,
    transparent 70%
  );
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.hero-cta-button .animate-shine {
  animation: shine 3s infinite;
}

.hero-cta-button:active .animate-gradient-hero {
  filter: brightness(0.9);
}