/* FreeRange Custom Fonts */

/* Nunito - friendly body font */
@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/nunito-400.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/nunito-600.woff2') format('woff2');
}

@font-face {
  font-family: 'Nunito';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/fonts/nunito-700.woff2') format('woff2');
}

/* Fredoka - playful display/header font */
@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/fonts/fredoka-500.woff2') format('woff2');
}

@font-face {
  font-family: 'Fredoka';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/fonts/fredoka-600.woff2') format('woff2');
}

/* Apply fonts */
body {
  font-family: 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

/* Headers use Fredoka */
h1, h2, h3, .font-display {
  font-family: 'Fredoka', 'Nunito', ui-sans-serif, system-ui, sans-serif;
}

/* Logo/brand text */
.brand-text {
  font-family: 'Fredoka', sans-serif;
  font-weight: 600;
}

/* HTMX Loading Indicator */
.htmx-indicator {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #22c55e, #4ade80, #22c55e);
  background-size: 200% 100%;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s ease-out;
  animation: shimmer 1.5s infinite linear;
}

.htmx-indicator.htmx-request {
  opacity: 1;
}

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Also add a subtle opacity to elements being swapped */
.htmx-swapping {
  opacity: 0.7;
  transition: opacity 0.2s ease-out;
}

/* Elements that triggered a request get a subtle indicator */
[hx-get].htmx-request,
[hx-post].htmx-request,
[hx-put].htmx-request,
[hx-delete].htmx-request {
  opacity: 0.7;
  pointer-events: none;
}