/* Halloween theme: loaded after styles.css and only overrides colors and a few
   decorations. To go back to the normal Falcon look, remove the
   <link href="halloween.css"> line in index.html. */

:root {
  --navy: #2a0f45;
  --blue: #5b2a86;
  --red: #ff7a1a;
  --accent: #d9570a;

  --bg: #fbf3e6;
  --surface: #fffdf8;
  --surface-2: #f6e9d3;
  --text: #24142e;
  --muted: #6b5a73;
  --border: #ecd9bc;
  --link: #6a2fa0;
  --focus: #ff7a1a;
  --shadow: 0 1px 2px rgba(42, 15, 69, 0.07), 0 6px 18px rgba(42, 15, 69, 0.09);

  --red-day: #b3261e;  --red-day-bg: #fde7e3;
  --blue-day: #5b2a86; --blue-day-bg: #efe3fa;

  --athletics: #5b2a86; --athletics-bg: #efe3fa;
}

:root[data-theme="dark"] {
  --navy: #12061f;
  --accent: #ff9340;

  --bg: #0d0715;
  --surface: #1a1026;
  --surface-2: #261637;
  --text: #f6ecff;
  --muted: #b3a1c4;
  --border: #38234f;
  --link: #ffa95c;
  --focus: #ff9340;
  --shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 6px 22px rgba(255, 122, 26, 0.08);

  --red-day: #ff8f84;  --red-day-bg: #3d1218;
  --blue-day: #c9a2f5; --blue-day-bg: #2c1649;

  --athletics: #c9a2f5; --athletics-bg: #2c1649;
}

/* Header: deep purple with an orange underline and a pumpkin glow */
.app-header {
  background: linear-gradient(120deg, #12061f 0%, #3b1766 70%, #5b2a86 100%);
  border-bottom: 4px solid #ff7a1a;
  position: relative;
  overflow: hidden;
}
.app-header::after {
  content: "";
  position: absolute;
  right: -40px; top: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.35), transparent 65%);
  pointer-events: none;
}
.brand-mark {
  background: linear-gradient(145deg, #ff9340, #d9570a);
  color: #24142e;
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25), 0 0 14px rgba(255, 122, 26, 0.6);
}
.brand-name::before { content: "🎃 "; }
.brand-sub { font-size: 0; }
.brand-sub::after {
  content: "Saratoga High · Go Falcons! 🦇";
  font-size: 0.75rem;
}

/* Today hero cards */
.hero-red  { background: linear-gradient(135deg, #e8531a, #8f1d0a); }
.hero-blue { background: linear-gradient(135deg, #7a3bb8, #2a0f45); }
.hero-red .hero-pill { color: #8f1d0a; }
.hero::after { filter: hue-rotate(10deg); }

/* Buttons and chips */
.link-btn.primary,
.card .link-btn.primary { background: #5b2a86; border-color: #5b2a86; color: #fff; }
:root[data-theme="dark"] .link-btn.primary { background: #ff7a1a; border-color: #ff7a1a; color: #1b0a00; }
.filter-btn[aria-pressed="true"] { background: #5b2a86; border-color: #5b2a86; color: #fff; }
:root[data-theme="dark"] .filter-btn[aria-pressed="true"] { background: #ff7a1a; border-color: #ff7a1a; color: #1b0a00; }

/* Cards get a faint orange edge in dark mode so they glow a little */
:root[data-theme="dark"] .card { border-color: #4a2d66; }

/* Bottom tab bar */
.tab-bar { border-top: 2px solid #ff7a1a; }

/* Footer */
.app-footer::before {
  content: "🦇  🕸️  🎃  🕸️  🦇";
  display: block;
  text-align: center;
  letter-spacing: 0.3em;
  margin-bottom: 6px;
}

/* Respect people who turn off motion: nothing here animates, but keep it that way */
@media (prefers-reduced-motion: no-preference) {
  .brand-name::before { display: inline-block; animation: pumpkin-bob 3s ease-in-out infinite; }
  @keyframes pumpkin-bob {
    0%, 100% { transform: translateY(0) rotate(-4deg); }
    50% { transform: translateY(-2px) rotate(4deg); }
  }
}