/* Claude Academy skin for Vikunja (v2.6.0). Injected into index.html by nginx
   (branding/nginx.conf.template). Palette and type are Direction D from
   claude-academy/src/styles/register-dark.css:
     off-white #EEF2F6, navy #0D1B2A, deep blue #2E6FB5, light blue #7EB8E8.
   Only CSS custom properties and a few stable class names are touched, so a
   Vikunja upgrade degrades to "partly stock" rather than breaking. Re-check
   the selectors marked UPGRADE-CHECK after each version bump. */

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

:root {
  /* #2E6FB5 as HSL; Vikunja derives --primary, --link and hovers from these. */
  --primary-h: 211deg;
  --primary-s: 59%;
  --primary-l: 45%;
  --logo-text-color: #0d1b2a;
  --ca-navy: #0d1b2a;
  --ca-light-blue: #7eb8e8;
  --ca-off-white: #f3f5f8;
}

/* Light mode only: Vikunja's dark theme swaps --grey-100 (its stock
   --site-background) but never sets --site-background itself, so a plain
   :root value here kept the page light while dark mode turned text white. */
:root:not(.dark) {
  --site-background: #eef2f6;
}

/* Dark mode keeps Vikunja's greys and only moves the accent onto our blue,
   lifted so it still reads on the dark surfaces. */
:root.dark {
  --primary-h: 211deg;
  --primary-s: 59%;
  --primary-l: 55%;
  --logo-text-color: var(--ca-off-white);
}

/* Type: Inter body, Oswald display. */
body,
button,
input,
select,
textarea {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
}

h1,
h2,
h3,
.title,
.input.title {
  font-family: "Oswald", "Barlow Condensed", "Arial Narrow", sans-serif;
  letter-spacing: 0.01em;
}

/* Login / register / password reset (NoAuthWrapper.vue). UPGRADE-CHECK. */
.no-auth-wrapper {
  /* Drop the llama illustration. */
  background: var(--site-background) !important;
}

.noauth-container .image {
  /* Replace the stock photo with the site's navy band and faint grid. */
  background:
    linear-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, rgba(255, 255, 255, 0.06) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--ca-navy) !important;
}

.noauth-container .image::before {
  /* The darkening gradient was for the photo; the navy needs none. */
  display: none;
}

.noauth-container .image-title {
  font-family: "Oswald", "Arial Narrow", sans-serif;
  font-weight: 500 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--ca-off-white);
}

/* The wordmark SVG is wider than the stock logo; let it use the room. */
.no-auth-wrapper > .logo img.logo {
  max-inline-size: 280px;
}