/**
 * Oulalab Hoppscotch brand — aligned with BookStack / bo/front
 * (pink-neon / plum / off-white). Loaded twice (early + #late) so it
 * wins over Hoppscotch's bundled accent tokens.
 */

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@400;500;600;700&display=swap");

:root {
  --oulalab-plum-dark: #2d132b;
  --oulalab-plum: #662f5f;
  --oulalab-pink-neon: #df3265;
  --oulalab-pink-pastel: #f7e8f7;
  --oulalab-off-white: #faf6fa;
}

:root,
:root[data-accent],
:root[data-accent="green"],
:root[data-accent="teal"],
:root[data-accent="blue"],
:root[data-accent="indigo"],
:root[data-accent="purple"],
:root[data-accent="orange"],
:root[data-accent="pink"],
:root[data-accent="red"],
:root[data-accent="yellow"] {
  --accent-color: #df3265 !important;
  --accent-light-color: #f26aa3 !important;
  --accent-dark-color: #c0254f !important;
  --accent-contrast-color: #ffffff !important;
  --gradient-from-color: #f26aa3 !important;
  --gradient-via-color: #df3265 !important;
  --gradient-to-color: #c0254f !important;
}

html,
body,
#app {
  font-family: "Manrope", ui-sans-serif, system-ui, sans-serif;
}

/* Login /enter atmosphere closer to BO + BookStack */
body {
  background:
    radial-gradient(ellipse 80% 55% at 12% 18%, rgb(247 232 247 / 0.9), transparent 55%),
    radial-gradient(ellipse 70% 50% at 88% 78%, rgb(223 50 101 / 0.12), transparent 50%),
    #faf6fa;
}

:root.dark body,
:root[data-theme="dark"] body,
html.dark body {
  background:
    radial-gradient(ellipse 70% 50% at 20% 20%, rgb(102 47 95 / 0.4), transparent 55%),
    #1a0f19;
}

/* Dark chrome toward plum (BookStack header feel) */
:root.dark,
html.dark {
  --primary-color: #1a0f19 !important;
  --primary-light-color: #241524 !important;
  --primary-dark-color: #2d132b !important;
  --divider-color: #3a1f38 !important;
  --divider-light-color: #3a1f38 !important;
  --divider-dark-color: #4a2850 !important;
}

/* Splash on /enter: hide stock UFO SVG art, show Oulalab icon (no DOM swaps). */
svg.h-16.w-16.rounded {
  width: 4rem !important;
  height: 4rem !important;
  background: url("/icon.png") center / contain no-repeat !important;
  border-radius: 0.75rem;
  box-shadow: 0 8px 28px rgb(45 19 43 / 0.18);
}

svg.h-16.w-16.rounded > * {
  opacity: 0 !important;
}

/* Prefer Oulalab wordmark wherever stock logo assets are referenced */
img[src="/logo.svg"],
img[src="/logo.png"],
img[src="/logo-light.svg"],
img[src*="logo.svg"],
img[src*="logo.png"] {
  object-fit: contain;
  max-height: 2.25rem;
}

/* Header app.name button: keep text (patched to Oulalab) readable */
a.tracking-wide,
button.tracking-wide {
  letter-spacing: 0.06em;
}

/* Primary actions → pink-neon */
.bg-accentColor,
button.bg-accentColor,
a.bg-accentColor,
.bg-accent,
button.primary {
  background-color: var(--oulalab-pink-neon) !important;
  border-color: var(--oulalab-pink-neon) !important;
}

.text-accentColor,
.text-accent {
  color: var(--oulalab-pink-neon) !important;
}

/* Selection / focus rings */
*::selection {
  background-color: #c0254f !important;
  color: #fff !important;
}