/* 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;
}

/* cyberpulp faces (directive-26a261). Picked 2026-10-27: Exo 2 for headings,          */
/* Silkscreen for labels, VT323 for form fields — stellar casts them under            */
/* [data-skin="cyberpulp"]. Kanit, Audiowide and Pixelify Sans stay as the lab's       */
/* remaining candidates on /lab/skins/. A browser fetches a face only where it is used. */
/* All SIL Open Font License, fontsource builds.                                      */
@font-face {
  font-family: "Exo 2";
  src: url("../fonts/exo-2/exo-2-latin-900-italic.9b088933e38c.woff2") format("woff2");
  font-weight: 900;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Kanit";
  src: url("../fonts/kanit/kanit-latin-800-italic.848ed08a2562.woff2") format("woff2");
  font-weight: 800;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Audiowide";
  src: url("../fonts/audiowide/audiowide-latin-400-normal.fa3af39df234.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Silkscreen";
  src: url("../fonts/silkscreen/silkscreen-latin-400-normal.5eef6cee3f3d.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("../fonts/pixelify-sans/pixelify-sans-latin-400-normal.995d2067f1c0.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "VT323";
  src: url("../fonts/vt323/vt323-latin-400-normal.9cb03ff10174.woff2") format("woff2");
  font-weight: 400;
  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;
}

/* 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;
  }
}
*/