/* Camp theme for Homebox (the inventory).
   Injected by infra/homebox/nginx.conf, after /branding/theme.css; Homebox
   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 Homebox's own CSS variables (shadcn style, bare "H S% L%" triplets,
   hence theme.css's --camp-…-hsl), so it survives most upgrades; after a
   Homebox upgrade, check the header, the sidebar and an item page. */

/* ── Fonts ────────────────────────────────────────────────────────────
   The organisation's (theme.css declares the faces, self-hosted, so no
   request goes to Google: nDSG/GDPR). */
html, body, button, input, select, textarea {
  font-family: var(--camp-font-text, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
}
h1, h2, h3, .gyc-brand {
  font-family: var(--camp-font-heading, system-ui, sans-serif);
  letter-spacing: -0.01em;
}

/* ── Colours ──────────────────────────────────────────────────────────
   Homebox's default theme lives on :root; picking another theme in Profil
   sets data-theme on <html>. Only the default is re-coloured, so anyone who
   chooses a theme (a dark one, say) still gets exactly that theme. */
html:not([data-theme]),
html[data-theme="homebox"] {
  --background: var(--camp-sand-hsl, 36 33% 97%);
  --background-accent: var(--camp-sand-card-hsl, 36 30% 94%);   /* the main area behind the cards */
  --foreground: var(--camp-ink-hsl, 138 10% 20%);
  /* Primary = the strong accent: white text on it is at least 4.5:1. */
  --primary: var(--camp-accent-strong-hsl, 16 69% 39%);
  --primary-foreground: 0 0% 100%;
  /* Secondary = the dark colour: the header bar. */
  --secondary: var(--camp-forest-hsl, 147 36% 15%);
  --secondary-foreground: var(--camp-sand-hsl, 36 33% 97%);
  --accent: var(--camp-sand-border-hsl, 38 33% 89%);
  --accent-foreground: var(--camp-forest-hsl, 147 36% 15%);
  --muted: var(--camp-sand-muted-hsl, 36 25% 92%);
  --muted-foreground: var(--camp-ink-muted-hsl, 140 8% 36%);
  --card: 0 0% 100%;
  --card-foreground: var(--camp-ink-hsl, 138 10% 20%);
  --popover: 0 0% 100%;
  --popover-foreground: var(--camp-ink-hsl, 138 10% 20%);
  --input: var(--camp-sand-border-strong-hsl, 39 25% 84%);
  --border: var(--camp-sand-border-strong-hsl, 39 25% 84%);
  --ring: var(--camp-accent-strong-hsl, 16 69% 39%);
  --sidebar-background: var(--camp-sand-card-hsl, 36 38% 93%);
  --sidebar-foreground: var(--camp-ink-hsl, 138 10% 20%);
  --sidebar-primary: var(--camp-accent-strong-hsl, 16 69% 39%);
  --sidebar-primary-foreground: 0 0% 100%;
  --sidebar-accent: var(--camp-sand-border-hsl, 38 33% 87%);
  --sidebar-accent-foreground: var(--camp-forest-hsl, 147 36% 15%);
  --sidebar-border: var(--camp-sand-border-strong-hsl, 39 25% 84%);
  --sidebar-ring: var(--camp-accent-strong-hsl, 16 69% 39%);
}

/* ── Header: the logo + "Inventaire" instead of the HomeBox wordmark ── */
a:has(> svg[viewBox="0 0 263 45"]) {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
}
a > svg[viewBox="0 0 263 45"] {
  display: none;
}
/* On the dark bar the logo sits on a disc of the page colour: a logo drawn
   for a light background stays visible. */
a:has(> svg[viewBox="0 0 263 45"])::before {
  content: "";
  width: 40px;
  height: 40px;
  flex: none;
  border-radius: 50%;
  background: var(--camp-sand, #FAF8F5) var(--camp-logo, url(/branding/logo)) center / 34px no-repeat;
}
a:has(> svg[viewBox="0 0 263 45"])::after {
  content: "Inventaire";
  font-family: var(--camp-font-heading, system-ui, sans-serif);
  font-weight: 800;
  font-size: 1.35rem;
  line-height: 1;
  color: var(--camp-sand, #FAF8F5);
}

/* ── Sidebar: the logo in the round badge instead of the box drawing ── */
a[href="/home"] > div.rounded-full:has(> svg) {
  background: var(--camp-sand, #FAF8F5) var(--camp-logo, url(/branding/logo)) center / 78% no-repeat;
  box-shadow: inset 0 0 0 1px hsl(var(--camp-sand-border-strong-hsl, 39 25% 84%));
}
a[href="/home"] > div.rounded-full > svg {
  visibility: hidden;
}