/*
 * 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.
 *
 * Note: Tailwind CSS is loaded separately in the layout via asset_path("tailwind.css")
 * because Propshaft doesn't process CSS @import statements.
 */

/* Background - Black */
html,
body {
  background-color: #000000 !important;
}

/* Text Color - White (for all text except headings) */
body {
  color: #ffffff !important;
}

/* Ensure common text content elements are white */
p,
span,
div,
a,
li,
td,
th,
label {
  color: #ffffff !important;
}

/* Brand color variables */
:root {
  --brand-pink: #D6006E;
  --brand-blue: #1E50A2;
  --brand-green: #00A859;
  --brand-gold: #FFD700;
}

/* Title Color - Brand Pink and Bold */
/* All headings (h1-h6) are styled with the brand pink color and bold font weight */
/* Using higher specificity (html body) to override Tailwind base styles */
html body h1,
html body h2,
html body h3,
html body h4,
html body h5,
html body h6 {
  color: var(--brand-pink) !important;
  font-weight: bold !important;
}

/* Utility classes for brand colors */
.text-brand-pink {
  color: var(--brand-pink) !important;
}

.text-brand-blue {
  color: var(--brand-blue) !important;
}

.text-brand-green {
  color: var(--brand-green) !important;
}

.text-brand-gold {
  color: var(--brand-gold) !important;
}

/* Background utilities for brand colors */
.bg-brand-gold {
  background-color: var(--brand-gold) !important;
}

/* Border utilities for brand colors */
.border-brand-gold {
  border-color: var(--brand-gold) !important;
}

/* Hover utility for brand-blue */
.hover\:text-brand-blue:hover {
  color: var(--brand-blue) !important;
}

/* Hover utility for brand-gold */
.hover\:text-brand-gold:hover {
  color: var(--brand-gold) !important;
}

/* Subtle glow effect for brand-gold (used in carousel) */
.glow-gold {
  box-shadow: 0 0 15px rgba(255, 215, 0, 0.15),
    0 0 30px rgba(255, 215, 0, 0.08);
}

.hover\:glow-gold:hover {
  box-shadow: 0 0 20px rgba(255, 215, 0, 0.2),
    0 0 40px rgba(255, 215, 0, 0.1);
}