/* GotNexts — custom CSS on top of Tailwind CDN
   Galaga palette, accessible defaults */

:root {
  --bg:           #050a14;
  --bg-surface:   #0a1628;
  --bg-card:      #0d1f3c;
  --accent-blue:  #00aaff;
  --accent-green: #00ff88;
  --accent-amber: #ffaa00;
  --text-primary: #e8f4ff;
  --text-muted:   #6b8db5;
  --border:       #1a3a6b;
}

@media (prefers-color-scheme: light) {
  :root {
    --bg:           #d8e8f0;
    --bg-surface:   #c8d8e4;
    --bg-card:      #bccdd8;
    --accent-blue:  #006fa8;
    --accent-green: #007a44;
    --accent-amber: #8a5c00;
    --text-primary: #0a1628;
    --text-muted:   #3a5570;
    --border:       #8aabcc;
  }
}

/* Focus rings — never suppress outline */
*:focus-visible {
  outline: 2px solid var(--accent-blue);
  outline-offset: 2px;
}

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

/* Line clamp utility */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* Pixel font rendering */
.font-pixel {
  image-rendering: pixelated;
  -webkit-font-smoothing: none;
}

/* HTMX loading indicator */
.htmx-request #listing-results {
  opacity: 0.5;
  transition: opacity 200ms;
}

/* Smooth transitions for theme switch */
body {
  transition: background-color 200ms, color 200ms;
}