@import "tailwindcss";

@theme {
  /* ── Backgrounds — deep neutral dark, no purple tint ─────────────────────── */
  --color-bg: #111111;
  --color-surface: #1c1c1c;
  --color-surface-2: #242424;
  --color-surface-hover: #2c2c2c;
  --color-border: #333333;
  --color-border-subtle: #272727;

  /* ── Text — clean white, no tint ─────────────────────────────────────────── */
  --color-text: #f5f5f5;
  --color-text-secondary: #b0b0b0;
  --color-text-muted: #737373;
  --color-text-dim: #4a4a4a;

  /* ── Hot pink accent — neon sign energy ──────────────────────────────────── */
  --color-accent: #ff4d8d;
  --color-accent-hover: #e6006e;
  --color-accent-text: #fff0f7;
  --color-accent-muted: #3d0f22;

  /* ── Open — electric lime green (go!) ────────────────────────────────────── */
  --color-open-bg: #0a1a0d;
  --color-open-border: #22c55e;
  --color-open-text: #4ade80;
  --color-open-hours: #bbf7d0;

  /* ── Weather delay — blue (open by schedule but all rides closed) ───────── */
  --color-weather-bg: #0a1020;
  --color-weather-border: #3b82f6;
  --color-weather-text: #60a5fa;
  --color-weather-hours: #bfdbfe;

  /* ── Closing — amber (post-close buffer, rides still winding down) ───────── */
  --color-closing-bg: #1a1100;
  --color-closing-border: #d97706;
  --color-closing-text: #fbbf24;
  --color-closing-hours: #fde68a;

  /* ── Passholder preview — vivid cyan ─────────────────────────────────────── */
  --color-ph-bg: #051518;
  --color-ph-border: #22d3ee;
  --color-ph-hours: #cffafe;
  --color-ph-label: #67e8f9;

  /* ── Today — vivid yellow, unmissable ────────────────────────────────────── */
  --color-today-bg: #1a1800;
  --color-today-border: #facc15;
  --color-today-text: #fef08a;

  /* ── Weekend — barely-there dark tint ───────────────────────────────────────*/
  --color-weekend-header: #181818;

  /* ── Region header ───────────────────────────────────────────────────────── */
  --color-region-bg: #161616;
  --color-region-accent: #ff4d8d;
}

:root {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: ui-sans-serif, system-ui, -apple-system, sans-serif;
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Scrollbar ───────────────────────────────────────────────────────────── */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: var(--color-surface-2);
}
::-webkit-scrollbar-thumb {
  background: var(--color-border);
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-accent);
}

/* ── Sticky column shadow when scrolling ─────────────────────────────────── */
.sticky-shadow {
  box-shadow: 4px 0 16px -2px rgba(0, 0, 0, 0.5);
  clip-path: inset(0 -16px 0 0);
}

/* ── Park name link hover ────────────────────────────────────────────────── */
.park-name-link {
  text-decoration: none;
  color: inherit;
  transition: background 150ms ease;
}
.park-name-link:hover {
  background: var(--color-surface-hover);
}

/* ── Mobile park card hover ─────────────────────────────────────────────── */
.park-card {
  transition: background 150ms ease;
}
.park-card:hover {
  background: var(--color-surface-hover) !important;
}

/* ── Park month calendar — responsive row heights ───────────────────────── */
/* Mobile: fixed uniform rows so narrow columns don't cause height variance  */
.park-calendar-grid {
  grid-auto-rows: 72px;
}
/* sm+: let rows breathe and grow with their content (cells are wide enough) */
@media (min-width: 640px) {
  .park-calendar-grid {
    grid-auto-rows: minmax(96px, auto);
  }
}

/* ── Pulse animation for skeleton ───────────────────────────────────────── */
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}
.skeleton {
  animation: pulse 1.8s ease-in-out infinite;
  background-color: var(--color-surface);
  border-radius: 4px;
}