/* Vyxo skin for shlink-web-client. Colours are swapped in nginx (sub_filter);
   this file only carries what a colour swap cannot: font, accent line, focus. */

:root {
  --font-sans: "Albert Sans", Arial, Helvetica, sans-serif;
  --vyxo-accent: #FB6B18;
}

html,
body {
  font-family: var(--font-sans);
}

::selection {
  background: var(--vyxo-accent);
  color: #fff;
}

nav.bg-lm-main {
  border-bottom: 3px solid var(--vyxo-accent);
}

nav.bg-lm-main a:hover,
nav.bg-lm-main button:hover {
  color: var(--vyxo-accent);
}

main a:hover {
  color: var(--vyxo-accent);
}

:focus-visible {
  outline-color: var(--vyxo-accent) !important;
  --tw-ring-color: var(--vyxo-accent) !important;
  --tw-inset-ring-color: rgb(251 107 24 / 0.5) !important;
}

h1,
h2,
h3,
h4,
h5 {
  letter-spacing: -0.01em;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
  accent-color: var(--vyxo-accent);
}

/* QR code dialog: its body is the Vyxo generator (see vyxo-qr.js) */
.vyxo-qr-panel {
  width: min(1240px, 96vw) !important;
  max-width: none !important;
}

.vyxo-qr-frame {
  display: block;
  width: 100%;
  height: min(1180px, 82vh);
  border: 0;
  border-radius: 8px;
  background: #E4DFCF;
}