/* ==========================================================================
   CoasterCardCollector shared site-wide styles
   ==========================================================================
   Extracted 2026-08-12 from the per-page inline <style> blocks. This file
   holds only the CSS that was identical (or near-identical, unified value across every page on the site: the color/theme
   variables, the box-sizing reset, and the base body/header/footer chrome
   that every page shares via header.js.

   Everything else  page layout, cards, modals, buttons, forms, etc. 
   stays in each page's own inline <style> block, since it genuinely
   differs from page to page.

   To change the site's color palette, spacing radius, or the shared
   header/footer chrome, edit it here once instead of in 32 files.
   ========================================================================== */

:root {
  --primary: #212121;
  --accent:  #1a72c8;
  --surface: #17222d;
  --card-bg: #263a49;
  --text:    #e5e7eb;
  --muted:   #9ca3af;
  --border:  #36364a;
  --radius:  12px;
}

*, *::before, *::after {
  box-sizing: border-box;
}

body {
  background: var(--surface);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  min-height: 100vh;
}

header {
  background: var(--primary);
  color: #fff;
  padding: 0 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.header-inner {
  display: flex;
  align-items: center;
  margin: 0 auto;
}

footer {
  background: var(--primary);
  color: rgba(255,255,255,0.7);
  text-align: center;
  font-size: 0.78rem;
  padding: 16px;
}

footer a {
  color: var(--accent);
  text-decoration: none;
}

/* Honor the user's OS-level reduced-motion preference site-wide. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}