/*
 * 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.
 */

/* ===========================================
 * Dark/Glass Theme Styles for Lexxy Content
 * Applied via parent text color class
 * =========================================== */

/* Dark theme: white/light text applied via parent element with text-white class */
.text-white .lexxy-content,
.text-white.lexxy-content {
  color: inherit;
}

.text-white .lexxy-content h1,
.text-white .lexxy-content h2,
.text-white .lexxy-content h3,
.text-white .lexxy-content h4,
.text-white .lexxy-content h5,
.text-white .lexxy-content h6 {
  color: #f9fafb; /* gray-50 */
}

.text-white .lexxy-content a {
  color: var(--color-primary-400);
}

.text-white .lexxy-content a:hover {
  color: var(--color-primary-300);
}

.text-white .lexxy-content code {
  background-color: rgba(55, 65, 81, 0.5); /* gray-700 with transparency */
  color: #f9fafb;
}

.text-white .lexxy-content pre {
  background-color: rgba(31, 41, 55, 0.8); /* gray-800 with transparency */
}

.text-white .lexxy-content blockquote {
  border-color: var(--color-primary-500);
  color: #d1d5db; /* gray-300 */
}

.text-white .lexxy-content hr {
  border-color: rgba(255, 255, 255, 0.2);
}

/* ===========================================
 * Intelligent Color Utilities
 * Dynamic text color based on primary color brightness
 * =========================================== */

/* Text color that adapts to primary color brightness.
   Uses CSS variable set by ColorPaletteGenerator.enhanced_css_variables_block
   Light primary colors get dark text, dark primary colors get light text. */
.text-on-primary {
  color: var(--color-text-on-primary, #ffffff);
}