/* Early Bird skin for wg-easy. Injected by nginx; wg-easy itself is unmodified.
   wg-easy uses Tailwind 3 with red-* as its accent, so those utilities are remapped to Early Bird orange. */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,700&family=IBM+Plex+Mono:wght@400;500&display=swap");

:root {
  --ebb-orange: #ee9440;
  --ebb-orange-mid: #cd731d;
  --ebb-orange-deep: #a8530c;
  --ebb-brown: #8f4606;
  --ebb-cream: #faf5ee;
  --ebb-cream-2: #f3eadc;
  --ebb-ink: #302d2a;
  --ebb-night: #231a14;
  --ebb-night-2: #2e231b;
  --ebb-night-3: #3b2e24;
}

/* ---------- surfaces ---------- */
body.bg-gray-50 { background: var(--ebb-cream) !important; color: var(--ebb-ink); }
.dark body, html.dark body.dark\:bg-neutral-800 { background: var(--ebb-night) !important; }
.dark .dark\:bg-neutral-800 { background-color: var(--ebb-night) !important; }
.dark .dark\:bg-neutral-700 { background-color: var(--ebb-night-2) !important; }
.dark .dark\:bg-neutral-600 { background-color: var(--ebb-night-3) !important; }
.dark .dark\:border-neutral-600, .dark .dark\:border-neutral-700 { border-color: var(--ebb-night-3) !important; }
.bg-white { background-color: #fffdf9 !important; }
.dark .bg-white.dark\:bg-neutral-700 { background-color: var(--ebb-night-2) !important; }

/* ---------- accent: red -> orange ---------- */
.bg-red-800, .dark .dark\:bg-red-800 { background-color: var(--ebb-orange-deep) !important; }
.bg-red-600, .dark .dark\:bg-red-600 { background-color: var(--ebb-orange-mid) !important; }
.hover\:bg-red-800:hover, .dark .dark\:hover\:bg-red-800:hover { background-color: var(--ebb-orange-deep) !important; }
.hover\:bg-red-700:hover, .dark .dark\:hover\:bg-red-700:hover { background-color: var(--ebb-brown) !important; }
.hover\:bg-red-600:hover, .dark .dark\:hover\:bg-red-600:hover { background-color: var(--ebb-orange-mid) !important; }
.bg-red-100, .dark .dark\:bg-red-100 { background-color: #fbe7d3 !important; }
.text-red-800, .hover\:text-red-800:hover, .dark .dark\:hover\:text-red-800:hover { color: var(--ebb-orange-deep) !important; }
.dark .dark\:text-red-600, .dark .dark\:text-red-300 { color: var(--ebb-orange) !important; }
.border-red-800, .hover\:border-red-800:hover, .focus\:border-red-800:focus { border-color: var(--ebb-orange-deep) !important; }
.hover\:border-red-600:hover, .dark .dark\:border-red-600, .dark .dark\:hover\:border-red-600:hover { border-color: var(--ebb-orange-mid) !important; }
.outline-red-700 { outline-color: var(--ebb-orange-mid) !important; }
.focus\:ring-red-700:focus, .focus\:ring-red-600:focus { --tw-ring-color: var(--ebb-orange-mid) !important; }
input:focus, select:focus, textarea:focus { --tw-ring-color: var(--ebb-orange-mid) !important; border-color: var(--ebb-orange-mid) !important; }
a { accent-color: var(--ebb-orange-mid); }
input[type="checkbox"]:checked { background-color: var(--ebb-orange-deep) !important; border-color: var(--ebb-orange-deep) !important; }

/* ---------- type ---------- */
h1, h2, .ebb-title { font-family: "Fraunces", Georgia, serif; letter-spacing: -0.01em; }
code, pre, .font-mono { font-family: "IBM Plex Mono", ui-monospace, monospace; }

/* ---------- logo / title ---------- */
h1 img[src="/logo.png"] { width: 44px !important; height: auto; margin-right: .5rem; }
.ebb-sub {
  display: block;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .8rem;
  font-weight: 400;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ebb-orange-mid);
  margin-top: .35rem;
}
.dark .ebb-sub { color: var(--ebb-orange); }

/* login card: bird instead of the generic avatar */
.ebb-avatar { background: var(--ebb-cream-2) !important; display: flex; align-items: center; justify-content: center; }
.dark .ebb-avatar { background: var(--ebb-night-3) !important; }
.ebb-avatar svg { display: none; }
.ebb-avatar::after {
  content: "";
  width: 56px; height: 40px;
  background: url("/ebb/logo.png") center / contain no-repeat;
}

.ebb-footer {
  text-align: center;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: .75rem;
  color: #8a7f74;
  margin: 2.5rem 0 1.5rem;
}

/* switches (Radix: data-state=checked) */
.data-\[state\=checked\]\:bg-red-800[data-state="checked"] { background-color: var(--ebb-orange-deep) !important; }