/* AQ Closet theme for Vikunja (notes.durstronaut.me).
   Palette, fonts and dark values are AQ Closet's own (aqcloset.com/style.css):
   one green hue at different lightnesses, white page, light-green modules
   with a dark green rule, outlined buttons, plain wordmark in the heading face. */

/* ── tokens: light ─────────────────────────────────────────────────────── */
html:root {
  --aqc-bg: #fff;
  --aqc-text: hsl(120 100% 13.3%);
  --aqc-soft-text: hsl(120 33.3% 40%);
  --aqc-link: hsl(120 50% 26.7%);
  --aqc-surface: #fff;
  --aqc-surface-hover: hsl(120 100% 98.2%);
  --aqc-module-bg: hsl(120 100% 96.7%);
  --aqc-module-border: hsl(120 100% 20%);
  --aqc-soft-border: hsl(120 42.9% 76.7%);
  --aqc-input-border: hsl(120 50% 86.7%);
  --aqc-code-bg: hsl(120 100% 93.3%);
  --aqc-marked: #0b61a4;
  --aqc-main-font: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --aqc-header-font: Delicious, "Trebuchet MS", "Segoe UI", system-ui, sans-serif;
  --aqc-brand-font: var(--aqc-header-font);

  /* Vikunja's own variables, re-pointed */
  --primary-h: 120deg; --primary-s: 50%; --primary-l: 26.7%;
  --link: var(--aqc-link);
  --link-hover: var(--aqc-text);
  --site-background: var(--aqc-bg);
  --scheme-main: var(--aqc-surface);
  --text: var(--aqc-text);
  --text-strong: var(--aqc-text);
  --text-light: var(--aqc-soft-text);
  --text-muted: var(--aqc-soft-text);
  --border: var(--aqc-soft-border);
  --border-light: var(--aqc-input-border);
  --input-border-color: var(--aqc-input-border);
  --card-border-color: var(--aqc-module-border);
  --logo-text-color: var(--aqc-text);
  --switch-view-active-background: var(--aqc-link);

  /* the grey ramp, given the same green cast */
  --grey-50: hsl(120 30% 98.5%);
  --grey-100-hsl: 120, 40%, 96%;
  --grey-100: hsl(var(--grey-100-hsl));
  --grey-200: hsl(120 35% 89%);
  --grey-300: hsl(120 25% 80%);
  --grey-400: hsl(120 12% 62%);
  --grey-500-hsl: 120, 18%, 42%;
  --grey-500: hsl(var(--grey-500-hsl));
  --grey-600: hsl(120 25% 32%);
  --grey-700: hsl(120 40% 22%);
  --grey-800: hsl(120 60% 16%);
  --grey-900-hsl: 120, 100%, 12%;
  --grey-900: hsl(var(--grey-900-hsl));
}

/* ── tokens: dark (Vikunja's dark class) ───────────────────────────────── */
html:root.dark {
  --aqc-bg: hsl(120 14% 8%);
  --aqc-text: hsl(120 30% 88%);
  --aqc-soft-text: hsl(120 12% 62%);
  --aqc-link: hsl(120 45% 72%);
  --aqc-surface: hsl(120 14% 12%);
  --aqc-surface-hover: hsl(120 16% 17%);
  --aqc-module-bg: hsl(120 16% 13%);
  --aqc-module-border: hsl(120 26% 36%);
  --aqc-soft-border: hsl(120 16% 27%);
  --aqc-input-border: hsl(120 16% 31%);
  --aqc-code-bg: hsl(120 18% 18%);
  --aqc-marked: hsl(205 62% 58%);

  --primary-h: 120deg; --primary-s: 40%; --primary-l: 38%;
  --switch-view-active-background: hsl(120 40% 34%);

  --grey-50-hsl: 120, 14%, 12%;
  --grey-50: hsl(var(--grey-50-hsl));
  --grey-100-hsl: 120, 16%, 17%;
  --grey-100: hsl(var(--grey-100-hsl));
  --grey-200: hsl(120 16% 24%);
  --grey-300: hsl(120 14% 34%);
  --grey-400: hsl(120 12% 46%);
  --grey-500-hsl: 120, 12%, 62%;
  --grey-500: hsl(var(--grey-500-hsl));
  --grey-600: hsl(120 18% 72%);
  --grey-700: hsl(120 24% 80%);
  --grey-800: hsl(120 30% 88%);
  --grey-900-hsl: 120, 30%, 94%;
  --grey-900: hsl(var(--grey-900-hsl));
  --white: var(--aqc-surface);
  --card-border-color: var(--aqc-module-border);
}

/* ── type ──────────────────────────────────────────────────────────────── */
body, body *:not(code):not(pre):not(kbd):not(samp):not(svg):not(svg *) {
  font-family: var(--aqc-main-font) !important;
}
body h1, body h2, body h3, body .title, body .subtitle {
  font-family: var(--aqc-header-font) !important;
  font-weight: normal !important;
}

/* ── masthead: white bar, thin rule, wordmark ──────────────────────────── */
header.navbar {
  background: var(--aqc-bg) !important;
  border-bottom: 1px solid var(--aqc-soft-border);
  box-shadow: none !important;
}
.logo-link svg.logo, .logo-link .logo { display: none !important; }
.logo-link > div::after {
  content: "Notes";
  font-family: var(--aqc-brand-font) !important;
  font-size: 26px;
  line-height: 1.1;
  letter-spacing: 0.2px;
  color: var(--aqc-text);
}

/* ── sidebar ───────────────────────────────────────────────────────────── */
aside.menu-container {
  background: var(--aqc-bg) !important;
  border-right: 1px solid var(--aqc-soft-border);
}

/* ── modules: light-green box, dark green rule ─────────────────────────── */
.card {
  background: var(--aqc-module-bg) !important;
  border: 1px solid var(--aqc-module-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
}
.card .card { background: var(--aqc-surface) !important; }

/* ── buttons: outlined, sentence case ──────────────────────────────────── */
.button {
  text-transform: none !important;
  font-weight: normal !important;
  letter-spacing: 0 !important;
  border-radius: 4px !important;
  box-shadow: none !important;
}
.button.is-primary:not(.is-outlined):not(.is-text) {
  background: var(--aqc-surface) !important;
  color: var(--aqc-text) !important;
  border: 1px solid var(--aqc-module-border) !important;
}
.button.is-primary:not(.is-outlined):not(.is-text):hover {
  background: var(--aqc-surface-hover) !important;
}

/* inputs: white, pale green border, green focus ring */
.input, .textarea, select {
  border-color: var(--aqc-input-border);
  box-shadow: none;
}
.input:focus, .textarea:focus, .input.is-focused {
  border-color: var(--aqc-soft-border) !important;
  box-shadow: 0 0 0 2px var(--aqc-soft-border) !important;
}

/* the login llama */
.app-container.is-login, .no-auth-wrapper, body { background-image: none !important; }

/* sidebar entries at AQ Closet's nav weight */
aside.menu-container .menu-list a, aside.menu-container .menu-list .list-menu-link { font-weight: 500 !important; }

/* "Mark task done!": an AQ Closet button, not a neon slab */
.button.button--mark-done {
  background: var(--aqc-surface) !important;
  color: var(--aqc-text) !important;
  border: 1px solid var(--aqc-module-border) !important;
}
.button.button--mark-done:hover { background: var(--aqc-surface-hover) !important; }
.button.button--mark-done.is-done, .button.button--mark-done:not(.is-pending) {
  background: var(--aqc-module-bg) !important;
}

/* ── login / signed-out pages ──────────────────────────────────────────── */
.no-auth-wrapper { background: var(--aqc-bg) !important; }
.no-auth-wrapper > div.logo { display: flex; justify-content: center; align-items: center; }
.no-auth-wrapper > div.logo::after {
  content: "Notes";
  font-family: var(--aqc-brand-font) !important;
  font-size: 32px;
  line-height: 1.1;
  color: var(--aqc-text);
}
.no-auth-wrapper svg.logo { display: none !important; }
.noauth-container {
  background: var(--aqc-module-bg) !important;
  border: 1px solid var(--aqc-module-border);
  border-radius: 6px;
  box-shadow: none !important;
  overflow: hidden;
}
.noauth-container section.image {
  background: var(--aqc-module-bg) !important;
  border-right: 1px solid var(--aqc-soft-border);
}
.noauth-container section.image::before, .noauth-container section.image::after { display: none !important; }
.noauth-container .image-title {
  color: var(--aqc-text) !important;
  font-family: var(--aqc-brand-font) !important;
  font-size: 34px !important;
  text-shadow: none !important;
}
.noauth-container main.content { background: var(--aqc-surface) !important; }