/* custom css overwrites */

/* ─── Typefaces ─── */
/* Stellar typography picks (locked):                                     */
/*   font-heading → Space Grotesk                                         */
/*   font-text    → Manrope                                               */
/*   font-mono    → Space Mono                                            */

/* Manrope: body, UI, navigation (variable, 200–800) */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope/manrope-latin-variable.938c6e8019b6.woff2") format("woff2");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}

/* Space Grotesk: display headings (variable, 300–700)                       */
/* Filename keeps the upstream quirk visible: the canonical fontsource build */
/* embeds family name "Space Grotesk Light" because the default instance is  */
/* locked at wght=300. The wght axis still ranges 300–700 and renders every  */
/* weight in that range correctly via the alias below.                       */
@font-face {
  font-family: "Space Grotesk";
  src: url("../fonts/space-grotesk/space-grotesk-latin-variable-light-default.87c506d88b9f.woff2") format("woff2");
  font-weight: 300 700;
  font-style: normal;
  font-display: swap;
}

/* Space Mono: code, IDs, oklch values, timestamps (static 400 + 700) */
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono/space-mono-latin-400.049dfc5919c2.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Space Mono";
  src: url("../fonts/space-mono/space-mono-latin-700.e5e908997a45.woff2") format("woff2");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* alpine-js cloaks are invisible to the user until alpine is ready */
[x-cloak] { display: none !important; }

/* htmx loading indicators — opacity with 200ms delay so fast requests
   never flash the indicator. The scan-bar indicator has no backdrop-blur
   so opacity works cleanly here. */
.htmx-indicator {
  opacity: 0;
  pointer-events: none;
  transition: opacity 150ms ease;
}
.htmx-request .htmx-indicator,
.htmx-request.htmx-indicator {
  opacity: 1;
  pointer-events: auto;
  transition: opacity 150ms ease 200ms;
}

/* HTMX 4 View Transitions — cross-fade #content swaps so the brief
   innerHTML-replace blink and the layout reflow on cross-page nav
   don't read as a hard flicker. Short duration keeps nav feeling snappy. */
::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 180ms;
}

/* globally overwrite input field colors here */
/*
input[type="radio"]:checked {
  // = tailwind teal-800
  border-color: #115e59 !important;
}

@media (prefers-color-scheme: dark) {
  // = tailwind teal-200
  input[type="radio"]:checked {
    border-color: #99f6e4 !important;
  }
}
*/