/* Custom Color Palette for Meta Leads */
/* Based on the product detail page color scheme */

/* Import Press Start 2P font for pixel art style */
@import url("https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap");

:root {
  /* Primary Brand Colors */
  --color-primary: #3b82f6; /* Light blue - text-primary */
  --color-success: #10b981; /* Bright green - badge-success */
  --color-warning: #f59e0b; /* Yellow - badge-warning */
  --color-error: #ef4444; /* Pinkish red - badge-error */
  --color-info: #06b6d4; /* Light blue - badge-info */
  
  /* Neutral Colors (existing) */
  --color-base-100: #ffffff;
  --color-base-200: #f3f4f6;
  --color-base-300: #d1d5db;
  --color-base-content: #1f2937;
  
  /* Extended Palette */
  --color-primary-light: #dbeafe;
  --color-success-light: #d1fae5;
  --color-warning-light: #fef3c7;
  --color-error-light: #fee2e2;
  --color-info-light: #cffafe;
  
  /* Dark Mode Variants */
  --color-primary-dark: #1e40af;
  --color-success-dark: #059669;
  --color-warning-dark: #d97706;
  --color-error-dark: #dc2626;
  --color-info-dark: #0891b2;
}

/* Utility Classes for Custom Colors */
.text-custom-primary { color: var(--color-primary); }
.text-custom-success { color: var(--color-success); }
.text-custom-warning { color: var(--color-warning); }
.text-custom-error { color: var(--color-error); }
.text-custom-info { color: var(--color-info); }

.bg-custom-primary { background-color: var(--color-primary); }
.bg-custom-success { background-color: var(--color-success); }
.bg-custom-warning { background-color: var(--color-warning); }
.bg-custom-error { background-color: var(--color-error); }
.bg-custom-info { background-color: var(--color-info); }

.bg-custom-primary-light { background-color: var(--color-primary-light); }
.bg-custom-success-light { background-color: var(--color-success-light); }
.bg-custom-warning-light { background-color: var(--color-warning-light); }
.bg-custom-error-light { background-color: var(--color-error-light); }
.bg-custom-info-light { background-color: var(--color-info-light); }

.border-custom-primary { border-color: var(--color-primary); }
.border-custom-success { border-color: var(--color-success); }
.border-custom-warning { border-color: var(--color-warning); }
.border-custom-error { border-color: var(--color-error); }
.border-custom-info { border-color: var(--color-info); }

/* Badge Variants */
.badge-custom-primary {
  background-color: var(--color-primary) !important;
  color: white !important;
  border-color: var(--color-primary) !important;
}

.badge-custom-success {
  background-color: var(--color-success) !important;
  color: white !important;
  border-color: var(--color-success) !important;
}

.badge-custom-warning {
  background-color: var(--color-warning) !important;
  color: white !important;
  border-color: var(--color-warning) !important;
}

.badge-custom-error {
  background-color: var(--color-error) !important;
  color: white !important;
  border-color: var(--color-error) !important;
}

.badge-custom-info {
  background-color: var(--color-info) !important;
  color: white !important;
  border-color: var(--color-info) !important;
}

/* Button Variants */
.btn-custom-primary {
  background-color: var(--color-primary);
  color: white;
  border-color: var(--color-primary);
}

.btn-custom-primary:hover {
  background-color: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
}

.btn-custom-success {
  background-color: var(--color-success);
  color: white;
  border-color: var(--color-success);
}

.btn-custom-success:hover {
  background-color: var(--color-success-dark);
  border-color: var(--color-success-dark);
}

.btn-custom-warning {
  background-color: var(--color-warning);
  color: white;
  border-color: var(--color-warning);
}

.btn-custom-warning:hover {
  background-color: var(--color-warning-dark);
  border-color: var(--color-warning-dark);
}

.btn-custom-error {
  background-color: var(--color-error);
  color: white;
  border-color: var(--color-error);
}

.btn-custom-error:hover {
  background-color: var(--color-error-dark);
  border-color: var(--color-error-dark);
}

.btn-custom-info {
  background-color: var(--color-info);
  color: white;
  border-color: var(--color-info);
}

.btn-custom-info:hover {
  background-color: var(--color-info-dark);
  border-color: var(--color-info-dark);
}

/* Card Variants */
.card-custom-primary {
  border-color: var(--color-primary);
  background-color: var(--color-primary-light);
}

.card-custom-success {
  border-color: var(--color-success);
  background-color: var(--color-success-light);
}

.card-custom-warning {
  border-color: var(--color-warning);
  background-color: var(--color-warning-light);
}

.card-custom-error {
  border-color: var(--color-error);
  background-color: var(--color-error-light);
}

.card-custom-info {
  border-color: var(--color-info);
  background-color: var(--color-info-light);
}

/* Progress Bar Variants */
.progress-custom-primary::-webkit-progress-value {
  background-color: var(--color-primary);
}

.progress-custom-success::-webkit-progress-value {
  background-color: var(--color-success);
}

.progress-custom-warning::-webkit-progress-value {
  background-color: var(--color-warning);
}

.progress-custom-error::-webkit-progress-value {
  background-color: var(--color-error);
}

.progress-custom-info::-webkit-progress-value {
  background-color: var(--color-info);
}

/* Button Icon Color Variants - Colored icons for meaningful buttons */
/* These classes change the icon color inside buttons */
.btn-icon-primary svg,
.btn-icon-primary svg * {
  stroke: #ffffff !important;
  fill: none !important;
}

.btn-icon-primary:hover svg,
.btn-icon-primary:hover svg * {
  stroke: #f0f0f0 !important;
  fill: none !important;
}

.btn-icon-success svg,
.btn-icon-success svg * {
  stroke: var(--color-success) !important;
  fill: none !important;
}

.btn-icon-success:hover svg,
.btn-icon-success:hover svg * {
  stroke: var(--color-success-dark) !important;
  fill: none !important;
}

.btn-icon-warning svg,
.btn-icon-warning svg * {
  stroke: var(--color-warning) !important;
  fill: none !important;
}

.btn-icon-warning:hover svg,
.btn-icon-warning:hover svg * {
  stroke: var(--color-warning-dark) !important;
  fill: none !important;
}

/* Edit user button icons should be white */
.edit-user-btn.btn-icon-warning svg,
.edit-user-btn.btn-icon-warning svg * {
  stroke: white !important;
  fill: none !important;
}

.edit-user-btn.btn-icon-warning:hover svg,
.edit-user-btn.btn-icon-warning:hover svg * {
  stroke: #f0f0f0 !important;
  fill: none !important;
}

/* Edit organization button icons should be white */
.edit-bu-btn.btn-icon-warning svg,
.edit-bu-btn.btn-icon-warning svg *,
.edit-sp-btn.btn-icon-warning svg,
.edit-sp-btn.btn-icon-warning svg * {
  stroke: white !important;
  fill: none !important;
}

.edit-bu-btn.btn-icon-warning:hover svg,
.edit-bu-btn.btn-icon-warning:hover svg *,
.edit-sp-btn.btn-icon-warning:hover svg,
.edit-sp-btn.btn-icon-warning:hover svg * {
  stroke: #f0f0f0 !important;
  fill: none !important;
}

.btn-icon-error svg,
.btn-icon-error svg * {
  stroke: var(--color-error) !important;
  fill: none !important;
}

.btn-icon-error:hover svg,
.btn-icon-error:hover svg * {
  stroke: var(--color-error-dark) !important;
  fill: none !important;
}

.btn-icon-info svg,
.btn-icon-info svg * {
  stroke: var(--color-info) !important;
  fill: none !important;
}

.btn-icon-info:hover svg,
.btn-icon-info:hover svg * {
  stroke: var(--color-info-dark) !important;
  fill: none !important;
}

/* High contrast mode support for button icons */
.hc .btn-icon-primary svg,
.hc .btn-icon-primary svg *,
.hc .btn-icon-success svg,
.hc .btn-icon-success svg *,
.hc .btn-icon-warning svg,
.hc .btn-icon-warning svg *,
.hc .btn-icon-error svg,
.hc .btn-icon-error svg *,
.hc .btn-icon-info svg,
.hc .btn-icon-info svg * {
  stroke: currentColor !important;
  fill: none !important;
}