/**
 * Widget Styles with CSS Custom Properties
 * These styles can be customized via the widget configuration
 */

/* Widget-specific CSS variables with fallbacks */
#finance-widget-root {
  --widget-primary-color: #3b82f6;    /* Default blue */
  --widget-secondary-color: #1e40af;  /* Default dark blue */
  --widget-font-family: 'Inter', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* Apply custom font family */
#finance-widget-root * {
  font-family: var(--widget-font-family);
}

/* Custom primary color applications */
#finance-widget-root .bg-blue-600 {
  background-color: var(--widget-primary-color) !important;
}

#finance-widget-root .hover\:bg-blue-700:hover {
  background-color: var(--widget-secondary-color) !important;
}

#finance-widget-root .focus\:ring-blue-500:focus {
  --tw-ring-color: var(--widget-primary-color) !important;
}

#finance-widget-root .border-blue-300 {
  border-color: var(--widget-primary-color) !important;
}

#finance-widget-root .bg-blue-100 {
  background-color: color-mix(in srgb, var(--widget-primary-color) 20%, white) !important;
}

#finance-widget-root .text-blue-700 {
  color: var(--widget-secondary-color) !important;
}

/* Range slider customization */
#finance-widget-root input[type="range"] {
  background: #374151;
}

#finance-widget-root input[type="range"]::-webkit-slider-thumb {
  background: var(--widget-primary-color);
}

/* Focus states */
#finance-widget-root input:focus,
#finance-widget-root button:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--widget-primary-color);
}

/* Hover states for interactive elements */
#finance-widget-root button:hover {
  transition: all 0.2s ease-in-out;
}
/* Custom button styles */
#finance-widget-root .bg-blue-600 {
  transition: background-color 0.2s ease-in-out;
}

#finance-widget-root .bg-blue-600:hover {
  background-color: var(--widget-secondary-color) !important;
}