/* ═══════════════════════════════════════════════
   DARK THEME — USA 250th
   Patriotic dark theme — deep midnight navy with
   bold red, white, and gold accents. Stars in the
   header. High contrast for easy reading.
   ═══════════════════════════════════════════════ */

:root {
  /* Deep navy base — unmistakably different from slate gray */
  --bg: #121628;
  --bg-soft: #0c0f1c;
  --bg-dark: #080a15;
  --window: #1e2340;
  --window-light: #262d4f;
  --paper: #1e2340;
  --paper-dark: #262d4f;
  --ink: #f8f4e8;
  --ink-bg: #080a15;
  --ink-soft: #e8e0d0;
  --text: #f8f4e8;
  --text-dim: #b0b8d0;
  --text-light: #7a82a0;
  --border: #2a3055;
  --border-soft: #1e2340;
  --border-deco: #4a5a8a;

  /* Patriotic accents — red, white, blue, gold */
  --red: #d63438;
  --red-dark: #e84448;
  --red-bg: rgba(214, 52, 56, 0.20);
  --blue: #3a6db8;
  --blue-dark: #5a8dd8;
  --blue-bg: rgba(58, 109, 184, 0.20);
  --green: #4c8c3c;
  --green-dark: #5da848;
  --green-bg: rgba(76, 140, 60, 0.18);
  --gold: #f0c020;
  --gold-dark: #ffd430;
  --gold-bg: rgba(240, 192, 32, 0.18);
  --orange: #dd7e2e;
  --orange-dark: #e89040;
  --orange-bg: rgba(221, 126, 46, 0.18);
  --purple: #7a4e8c;
  --purple-dark: #9468a8;
  --purple-bg: rgba(122, 78, 140, 0.18);
  --teal: #2e8c8c;
  --teal-bg: rgba(46, 140, 140, 0.18);

  /* Gold highlight for patriotic feel */
  --hl: #f0c020;
  --hl-soft: rgba(240, 192, 32, 0.18);
}

/* Header with patriotic star pattern */
.site-header {
  background: var(--bg-dark);
  background-image:
    radial-gradient(circle at 10% 30%, rgba(240, 192, 32, 0.5) 1px, transparent 1.8px),
    radial-gradient(circle at 30% 60%, rgba(58, 109, 184, 0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 50% 25%, rgba(240, 192, 32, 0.5) 1px, transparent 1.8px),
    radial-gradient(circle at 70% 65%, rgba(58, 109, 184, 0.4) 1px, transparent 1.5px),
    radial-gradient(circle at 90% 30%, rgba(240, 192, 32, 0.5) 1px, transparent 1.8px),
    linear-gradient(90deg,
      rgba(214, 52, 56, 0.15) 0%,
      rgba(58, 109, 184, 0.12) 50%,
      rgba(240, 192, 32, 0.10) 100%);
  background-size: 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100px 100px, 100% 100%;
  border-bottom: 2px solid var(--gold);
}

/* Card styling with navy tint */
.event-card {
  background: linear-gradient(160deg, var(--window) 0%, var(--window-light) 70%, var(--bg-soft) 100%);
}

.event-card:hover {
  box-shadow: var(--shadow-hover), 0 0 18px rgba(214, 52, 56, 0.22);
}

.event-card.featured {
  background: linear-gradient(160deg,
    rgba(214, 52, 56, 0.12) 0%,
    rgba(58, 109, 184, 0.08) 30%,
    var(--window) 50%,
    var(--window-light) 100%);
  box-shadow: var(--shadow-md),
    0 0 18px rgba(214, 52, 56, 0.22),
    0 0 12px rgba(58, 109, 184, 0.15);
}

/* Featured star gets a patriotic gold glow */
.featured-star {
  color: var(--gold-dark);
  text-shadow: 0 0 8px rgba(240, 192, 32, 0.5);
}

/* Brand accent gets patriotic red */
.brand-text .accent {
  color: var(--red-dark);
}

/* USA 250 badge stands out more */
.usa250-badge {
  background: linear-gradient(135deg, var(--red) 0%, var(--blue) 100%);
  border: 2px solid var(--gold);
  box-shadow: 0 0 12px rgba(240, 192, 32, 0.3);
}