/* Camp theme for Vikunja (the planning tool).
   Injected by infra/vikunja/nginx.conf, after /branding/theme.css; Vikunja
   itself has no theme setting. Colours, fonts and logo are the organisation's,
   set on the site (/admin/organisation) and read here as var(--camp-…); each
   var() carries the design's default, in case theme.css cannot be loaded.
   Built on Vikunja's own CSS variables, so it survives most upgrades; after a
   Vikunja upgrade, check the login page and a project. */

/* ── Fonts ────────────────────────────────────────────────────────────
   The organisation's (theme.css declares the faces, self-hosted, so no
   request goes to Google: nDSG/GDPR). Vikunja sets its fonts (Open Sans,
   Quicksand) on many scoped selectors, hence the broad !important rules. The
   heading font may ship bold weights only, so it is kept to titles. */
*:not(pre, code, kbd, samp, pre *, code *) {
  font-family: var(--camp-font-text, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif) !important;
}
h1, h2, h3:not(.task h3), h4, .title, .project-title, .card-header-title {
  font-family: var(--camp-font-heading, system-ui, sans-serif) !important;
  letter-spacing: -0.01em;
}

/* ── Colours, light theme ─────────────────────────────────────────────
   Doubled selectors outrank Vikunja's single ones whatever the load order. */
:root:root {
  /* Primary = the strong accent: white text on it is at least 4.5:1. */
  --primary-h: var(--camp-accent-strong-h, 16deg);
  --primary-s: var(--camp-accent-strong-s, 69%);
  --primary-l: var(--camp-accent-strong-l, 39%);
  --site-background: var(--camp-sand, #FAF8F5);   /* page and sidebar */
  --text: var(--camp-ink, #2D3730);
  --text-strong: var(--camp-forest, #183324);      /* titles */
  --text-light: var(--camp-ink-muted, #55645A);
  --logo-text-color: var(--camp-forest, #183324);
  --radius: 8px;
}

/* ── Colours, dark theme (a per-user choice in Vikunja's settings) ──────
   Keep Vikunja's dark greys; only the accent becomes terracotta. The light
   values above are undone here, or the dark theme would get a sand page. */
.dark.dark {
  --primary-h: var(--camp-accent-light-h, 15deg);   /* the light accent */
  --primary-s: var(--camp-accent-light-s, 76%);
  --primary-l: var(--camp-accent-light-l, 63%);
  --site-background: var(--grey-100);
  --text: var(--grey-800);
  --text-strong: var(--grey-900);
  --text-light: var(--grey-300);
  --logo-text-color: var(--grey-700);
}

/* ── Login and registration pages ──────────────────────────────────────
   Dark page instead of the llama drawing; the camp photo (as on the camp
   login) in the card's picture half instead of the llama photo. */
.no-auth-wrapper {
  background: var(--camp-forest, #183324) !important;
}
.no-auth-wrapper .image {
  background: url(/branding/login-background.jpg) center / cover no-repeat !important;
}

/* The llama mascot on empty pages. */
.llama-cool {
  display: none !important;
}

/* Logo: the camp logo is a square SVG with no intrinsic size, so without an
   explicit one it collapses to 0x0. */
img.logo {
  width: 48px !important;
  height: 48px !important;
  max-width: none !important;
  max-height: none !important;
}
/* On the dark login page and in the dark theme the logo sits on a disc of
   the page colour: a logo drawn for a light background stays visible. */
.no-auth-wrapper img.logo,
.dark img.logo {
  background: var(--camp-sand, #FAF8F5);
  border-radius: 50%;
  padding: 4px;
}
.no-auth-wrapper img.logo {
  width: 88px !important;
  height: 88px !important;
  padding: 6px;
  display: block;
  margin: 0 auto;
}
/* Its wrapper is capped at 48px, which would slide the bigger logo under
   the login card. */
.no-auth-wrapper div.logo {
  max-height: none !important;
}