/* CHANG brand overlay for Vikunja web UI
   Source: https://changcafe.ru/ manifest theme
   primary #035936 · surface #F2F1EB
*/

:root {
  --chang-green: #035936;
  --chang-green-hover: #024a2c;
  --chang-green-soft: #216c4d;
  --chang-cream: #f2f1eb;
  --chang-cream-deep: #e7e5dc;
  --chang-ink: #0f1f18;
  --chang-muted: #5d6b63;

  --primary-h: 155.6deg;
  --primary-s: 93.5%;
  --primary-l: 18%;
  --primary: hsl(var(--primary-h), var(--primary-s), var(--primary-l));
  --primary-invert: #f2f1eb;
  --primary-light: #e3ebe6;
  --primary-dark: #024a2c;

  --link-h: 155.6deg;
  --link-s: 70%;
  --link-l: 28%;
  --info-h: 155.6deg;
  --info-s: 45%;
  --info-l: 32%;
  --success-h: 155.6deg;
  --success-s: 55%;
  --success-l: 28%;

  --scheme-main: var(--chang-cream);
  --scheme-main-bis: #f7f6f1;
  --scheme-main-ter: var(--chang-cream-deep);
  --text: var(--chang-ink);
  --text-strong: var(--chang-ink);
  --text-light: var(--chang-muted);
  --border: #d5d8d1;
}

html,
body,
#app {
  background: var(--chang-cream) !important;
  color: var(--chang-ink);
}

body {
  font-family: Inter, "Segoe UI", system-ui, -apple-system, sans-serif;
}

/* Header */
header.navbar,
.navbar.is-primary,
nav.navbar {
  background: var(--chang-green) !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

header.navbar a,
header.navbar button,
header.navbar .navbar-item,
header.navbar .project-title,
.navbar.is-primary .navbar-item,
.navbar.is-primary a {
  color: var(--chang-cream) !important;
}

header.navbar .navbar-item:hover,
header.navbar a:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

header.navbar .icon,
header.navbar svg,
header.navbar .button {
  color: #f2f1eb !important;
  fill: #f2f1eb;
}

header.navbar .button {
  background: transparent !important;
  border-color: transparent !important;
}

header.navbar img.logo,
header.navbar .logo img,
.navbar-brand img,
a.logo-link img.logo {
  max-height: 32px !important;
  width: auto !important;
  height: 32px !important;
  filter: brightness(0) invert(1);
}

/* Primary actions */
.button.is-primary,
button.is-primary,
.button.is-link,
a.button.is-primary {
  background-color: var(--chang-green) !important;
  border-color: var(--chang-green) !important;
  color: var(--chang-cream) !important;
}

.button.is-primary:hover,
.button.is-primary:focus,
.button.is-link:hover {
  background-color: var(--chang-green-hover) !important;
  border-color: var(--chang-green-hover) !important;
}

.button.is-primary.is-outlined {
  background: transparent !important;
  color: var(--chang-green) !important;
  border-color: var(--chang-green) !important;
}

/* Login / auth surfaces */
.login,
.auth-container,
.card,
.box,
.modal-card,
.task-card,
.kanban-card {
  border-radius: 12px;
}

input.input:focus,
textarea.textarea:focus,
select.select:focus,
.input:focus,
.textarea:focus {
  border-color: var(--chang-green) !important;
  box-shadow: 0 0 0 0.125em rgba(3, 89, 54, 0.2) !important;
}

a {
  color: var(--chang-green-soft);
}

a:hover {
  color: var(--chang-green);
}

/* Kanban accents */
.fancy-checkbox.is-active,
.tag.is-primary,
.badge.is-primary {
  background-color: var(--chang-green) !important;
  color: var(--chang-cream) !important;
}

/* Dark scheme: keep green brand, soften cream surfaces */
html.theme-dark,
html[data-theme="dark"],
body.theme-dark {
  --scheme-main: #102018;
  --scheme-main-bis: #14261d;
  --scheme-main-ter: #1a2f24;
  --text: #eef3ef;
  --text-strong: #f7faf7;
  --text-light: #a7b5ad;
  --border: #2a4035;
  --primary-invert: #f2f1eb;
}

html.theme-dark body,
html.theme-dark #app,
html[data-theme="dark"] body,
html[data-theme="dark"] #app {
  background: #102018 !important;
  color: #eef3ef;
}


/* Vikunja base-button primary (login / actions) */
.button.is-primary,
.base-button.is-primary,
.base-button.base-button--type-submit,
button.base-button.is-primary,
button[type="submit"].base-button,
.login .base-button:not(.button-link):not(.api-config__change-button),
.auth-form .base-button:not(.button-link) {
  background-color: var(--chang-green) !important;
  border-color: var(--chang-green) !important;
  color: var(--chang-cream) !important;
}

.button.is-primary:hover,
.base-button.is-primary:hover,
.login .base-button:not(.button-link):not(.api-config__change-button):hover {
  background-color: var(--chang-green-hover) !important;
  border-color: var(--chang-green-hover) !important;
}