/* Global styles for ReelFetch. Tailwind utilities are applied in HTML. */
:root {
  --ink: #0f172a;
  --cream: #faf8f5;
  --cobalt: #1e3a8a;
  --sky: #38bdf8;
  --coral: #fb7185;
  --sand: #f5e8d8;
}

html, body { height: 100%; }

/***** Accessibility *****/
:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/***** Animations *****/
@keyframes pulseFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-3px); } }
@keyframes shimmer { 0% { background-position: -450px 0; } 100% { background-position: 450px 0; } }

.loader { border: 2px solid rgba(15,23,42,0.1); border-top-color: var(--cobalt); border-radius: 9999px; width: 20px; height: 20px; animation: spin 0.9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/***** Cards and elements *****/
.card:hover { transform: translateY(-1px); }
.card { transition: transform 180ms ease; }

/***** Buttons *****/
button, .btn-primary, .btn-secondary, .btn-ghost { white-space: nowrap; }

/***** History scroll *****/
#historyList { scrollbar-width: thin; scrollbar-color: rgba(15,23,42,.25) transparent; }
#historyList::-webkit-scrollbar { height: 10px; }
#historyList::-webkit-scrollbar-thumb { background: rgba(15,23,42,.25); border-radius: 999px; }
#historyList::-webkit-scrollbar-track { background: transparent; }

/***** Reduced motion *****/
@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition-duration: 0.01ms !important; }
}

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

/***** Micro badges *****/
.badge { font-variant-numeric: tabular-nums; }

/***** Toast *****/
.toast { position: fixed; right: 14px; bottom: 14px; z-index: 60; background: #0b1220; color: white; padding: 10px 14px; border-radius: 12px; font-size: 13px; box-shadow: 0 10px 25px rgba(0,0,0,.18); opacity: 0; transform: translateY(8px); transition: opacity .2s ease, transform .2s ease; }
.toast.show { opacity: 1; transform: translateY(0); }

/***** Skeleton *****/
.skeleton { background: linear-gradient(90deg, rgba(0,0,0,0.04) 25%, rgba(0,0,0,0.08) 37%, rgba(0,0,0,0.04) 63%); background-size: 400% 100%; animation: shimmer 1.2s ease-in-out infinite; }