/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

/*
 *= require print
 */

/* Custom Theme Colors */
.bg-theme-primary {
  background-color: #9351F5 !important;
}

.text-theme-primary-light {
  color: #D6BBFF !important;
}

/* Additional theme color variations */
.bg-theme-50 { background-color: #F8F4FF; }
.bg-theme-100 { background-color: #F0E8FF; }
.bg-theme-200 { background-color: #E1D2FF; }
.bg-theme-300 { background-color: #D6BBFF; }
.bg-theme-400 { background-color: #C49DFF; }
.bg-theme-500 { background-color: #B17FFF; }
.bg-theme-600 { background-color: #9351F5; }
.bg-theme-700 { background-color: #7C3AED; }
.bg-theme-800 { background-color: #6B21A8; }
.bg-theme-900 { background-color: #581C87; }

.text-theme-50 { color: #F8F4FF; }
.text-theme-100 { color: #F0E8FF; }
.text-theme-200 { color: #E1D2FF; }
.text-theme-300 { color: #D6BBFF; }
.text-theme-400 { color: #C49DFF; }
.text-theme-500 { color: #B17FFF; }
.text-theme-600 { color: #9351F5; }
.text-theme-700 { color: #7C3AED; }
.text-theme-800 { color: #6B21A8; }
.text-theme-900 { color: #581C87; }

.border-theme-primary { border-color: #9351F5; }
.border-theme-primary-light { border-color: #D6BBFF; }

/* Gradient utilities for theme colors */
.bg-gradient-to-r {
  background-image: linear-gradient(to right, var(--tw-gradient-stops));
}

.from-theme-300 {
  --tw-gradient-from: #D6BBFF;
  --tw-gradient-to: rgb(214 187 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-theme-500 {
  --tw-gradient-from: #B17FFF;
  --tw-gradient-to: rgb(177 127 255 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.from-theme-700 {
  --tw-gradient-from: #7C3AED;
  --tw-gradient-to: rgb(124 58 237 / 0);
  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
}

.to-theme-600 {
  --tw-gradient-to: #9351F5;
}

.to-theme-800 {
  --tw-gradient-to: #6B21A8;
}