/* ========================================
   PASS 2: GLOBAL DARK MODE BRIGHTENING
   Lift mid-tones, improve contrast, warm highlights
   ======================================== */

/* ========================================
   1. BACKGROUND LIFTING - Remove Black Crush
   ======================================== */

:root {
  /* Warm darks (lifted from pure black) */
  --bg-black-primary: #0d0d0f;
  --bg-black-secondary: #1a1a1e;
  --bg-black-tertiary: #252529;

  /* Card backgrounds - lighter, cleaner */
  --bg-card: #1f1f24;
  --bg-card-hover: #262a30;

  /* Text improvements */
  --text-primary: #f5f5f5;
  --text-secondary: #d4d4d8;
  --text-tertiary: #a1a1a8;

  /* Accent warm maroon */
  --accent-maroon: #8B0000;
  --accent-maroon-light: #a61616;
  --accent-maroon-pale: #4a0a0a;
}

/* Global background lift */
body {
  background-color: var(--bg-black-primary);
  color: var(--text-primary);
}

/* Section backgrounds - lifted */
section {
  background-color: var(--bg-black-primary);
}

section.py-24,
section.py-20,
section.py-16 {
  background: linear-gradient(
    to bottom,
    var(--bg-black-primary),
    var(--bg-black-secondary)
  );
}

/* Card brightening */
.card,
[data-card],
.juror-card,
.category-card,
.timeline-content {
  background: rgba(31, 31, 36, 0.8);
  backdrop-filter: blur(10px);
}

.card:hover,
[data-card]:hover,
.category-card:hover {
  background: rgba(38, 42, 48, 0.9);
}

/* ========================================
   2. TEXT CONTRAST IMPROVEMENT
   ======================================== */

/* Headings - brighter */
h1, h2, h3, h4, h5, h6 {
  color: var(--text-primary);
}

/* Body text - improved contrast */
p, span, div, li {
  color: var(--text-secondary);
}

/* Secondary text - elevated from dark gray */
.text-gray-400,
.text-gray-500,
.text-gray-600 {
  color: var(--text-tertiary) !important;
  opacity: 1 !important;
}

/* Ensure minimum contrast ratios */
.text-gray-300 {
  color: var(--text-secondary) !important;
}

/* ========================================
   3. SECTION SEPARATOR VISIBILITY
   ======================================== */

/* Visible borders between sections */
section {
  border-bottom: 1px solid rgba(139, 0, 0, 0.1);
}

/* Reduce excessive gradients that hide content */
section::after {
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(13, 13, 15, 0.15) 100%
  );
}

/* ========================================
   4. CARD STYLING - PREMIUM FEEL
   ======================================== */

/* Border refinement */
.card,
[data-card],
.timeline-content,
.category-card {
  border: 1px solid rgba(139, 0, 0, 0.15);
}

.card:hover,
[data-card]:hover,
.category-card:hover {
  border-color: rgba(139, 0, 0, 0.35);
}

/* Subtle box shadows for depth */
.card,
[data-card],
.category-card {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
}

.card:hover,
[data-card]:hover,
.category-card:hover {
  box-shadow: 0 8px 24px rgba(139, 0, 0, 0.2);
}

/* ========================================
   5. MAROON ACCENT WARMTH
   ======================================== */

/* Warm accent highlights */
.text-brandRed,
.text-red-600 {
  color: var(--accent-maroon-light) !important;
}

/* Maroon backgrounds */
button.bg-brandRed,
button.bg-red-600,
.bg-brandRed,
.bg-red-600 {
  background-color: var(--accent-maroon) !important;
}

button.bg-brandRed:hover,
button.bg-red-600:hover {
  background-color: var(--accent-maroon-light) !important;
}

/* ========================================
   6. MODAL BACKGROUNDS - BRIGHTENED
   ======================================== */

.modal,
[role="dialog"],
.jury-modal-content {
  background: rgba(31, 31, 36, 0.95);
  border-color: rgba(139, 0, 0, 0.2);
}

/* ========================================
   7. TIMELINE/PROGRESS ELEMENTS
   ======================================== */

.timeline-line,
[data-timeline],
.vision-timeline {
  background: linear-gradient(
    to bottom,
    var(--accent-maroon),
    rgba(139, 0, 0, 0.3),
    var(--accent-maroon)
  );
  opacity: 0.9;
}

/* ========================================
   8. BUTTON & CTA CLARITY
   ======================================== */

button,
[role="button"],
.cta,
[data-cta] {
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* ========================================
   9. INPUT & FORM FIELDS
   ======================================== */

input,
textarea,
select {
  background-color: var(--bg-card);
  color: var(--text-primary);
  border-color: rgba(139, 0, 0, 0.2);
}

input:focus,
textarea:focus,
select:focus {
  border-color: rgba(139, 0, 0, 0.5);
  background-color: var(--bg-card-hover);
}

/* ========================================
   10. NAVIGATION & HEADER
   ======================================== */

nav {
  background: rgba(13, 13, 15, 0.95);
  backdrop-filter: blur(10px);
}

/* ========================================
   11. REMOVE APOCALYPTIC HEAVINESS
   ======================================== */

/* Reduce opacity of vignette overlay */
.vignette {
  opacity: 0.5;
}

/* Lighter grain texture */
.grain {
  opacity: 0.01;
}

/* ========================================
   12. FOOTER STYLING
   ======================================== */

footer {
  background: linear-gradient(
    to bottom,
    rgba(25, 25, 30, 0.8),
    rgba(13, 13, 15, 0.95)
  );
  border-top: 1px solid rgba(139, 0, 0, 0.1);
}

/* ========================================
   13. LINK STYLING
   ======================================== */

a {
  color: var(--text-secondary);
}

a:hover {
  color: var(--accent-maroon-light);
}

/* ========================================
   14. SCROLLBAR BRIGHTENING (Webkit)
   ======================================== */

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: var(--bg-black-secondary);
}

::-webkit-scrollbar-thumb {
  background: var(--accent-maroon);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--accent-maroon-light);
}