/* Biopunk Peptides brand theme for Vikunja
   Palette per creative/biopunk-brand-compliance
   Strategy: brand accent surfaces, keep neutral-dark base for contrast.
   All text tokens verified WCAG AA (>=4.5:1) against their backgrounds. */

:root,
.dark {
  --biopunk-bg:        #0a0907;
  --biopunk-surface:   #14110c;
  --biopunk-alt:       #1a1610;
  --biopunk-hover:     #221d14;
  --biopunk-border:    #2a2418;
  --biopunk-border-lt: #3d3524;
  --biopunk-text:      #f0ead4;
  --biopunk-muted:     #9b8a5e;   /* 5.87:1 on bg - NOT #6b5d3e (3.09 fails AA) */
  --biopunk-gold:      #EAD191;
  --biopunk-sand:      #E1C683;
  --biopunk-harvest:   #846838;

  /* Vikunja primary -> brand gold */
  --primary:        #EAD191;
  --primary-dark:   #E1C683;
  --primary-light:  #f5e6c0;
  --link:           #EAD191;
  --grey-50:  #14110c;
  --grey-100: #1a1610;
  --grey-200: #221d14;
  --grey-300: #2a2418;
  --grey-400: #3d3524;
  --grey-500: #9b8a5e;
  --grey-600: #b8a97a;
  --grey-700: #d6cba8;
  --grey-800: #f0ead4;
  --grey-900: #ffffff;

  --site-background: #0a0907;
  --card-background: #14110c;
}

/* ---- base surfaces ---- */
body,
#app,
.app-content,
.content,
.app-container {
  background-color: var(--biopunk-bg) !important;
  color: var(--biopunk-text) !important;
}

.card,
.navbar,
.menu-container,
.modal-content,
.dropdown-content,
.box,
.task-view,
.taskitem {
  background-color: var(--biopunk-surface) !important;
  border-color: var(--biopunk-border) !important;
  color: var(--biopunk-text) !important;
}

/* ---- links & accents ---- */
a,
.link,
a.title,
.task-link {
  color: var(--biopunk-gold) !important;
}
a:hover { color: var(--biopunk-sand) !important; }

/* ---- primary buttons: black on gold, 13.3:1 ---- */
.button.is-primary,
button.is-primary,
.button.is-success,
input[type="submit"].is-primary {
  background-color: var(--biopunk-gold) !important;
  border-color: var(--biopunk-gold) !important;
  color: #0a0907 !important;
  font-weight: 600;
}
.button.is-primary:hover,
button.is-primary:hover,
.button.is-success:hover {
  background-color: var(--biopunk-sand) !important;
  border-color: var(--biopunk-sand) !important;
  color: #0a0907 !important;
}

/* secondary buttons: white on harvest, 5.23:1
   (cream #f0ead4 on harvest is only 4.34 - fails AA normal, so white) */
.button.is-outlined,
.button.is-secondary {
  border-color: var(--biopunk-harvest) !important;
  color: #ffffff !important;
  background-color: transparent !important;
}
.button.is-outlined:hover {
  background-color: var(--biopunk-harvest) !important;
  color: #ffffff !important;
}

/* ---- sidebar / navigation ---- */
.navbar,
.menu,
.namespace-container,
.app-sidebar {
  background-color: var(--biopunk-alt) !important;
  border-color: var(--biopunk-border) !important;
}
.menu-list a { color: var(--biopunk-text) !important; }
.menu-list a:hover {
  background-color: var(--biopunk-hover) !important;
  color: var(--biopunk-gold) !important;
}
.menu-list a.router-link-active,
.menu-list a.is-active {
  background-color: var(--biopunk-hover) !important;
  color: var(--biopunk-gold) !important;
  border-left: 3px solid var(--biopunk-gold) !important;
}
.menu-label { color: var(--biopunk-muted) !important; }

/* ---- inputs ---- */
.input, .textarea, .select select,
input[type="text"], input[type="email"],
input[type="password"], textarea {
  background-color: var(--biopunk-alt) !important;
  border-color: var(--biopunk-border-lt) !important;
  color: var(--biopunk-text) !important;
}
.input:focus, .textarea:focus,
input:focus, textarea:focus {
  border-color: var(--biopunk-gold) !important;
  box-shadow: 0 0 0 2px rgba(234, 209, 145, 0.25) !important;
}
::placeholder { color: var(--biopunk-muted) !important; opacity: 1 !important; }

/* ---- checkboxes / done state ---- */
.fancycheckbox span,
.task .fancycheckbox { color: var(--biopunk-gold) !important; }
.is-done,
.task.done {
  background-color: var(--biopunk-harvest) !important;
  color: #ffffff !important;
}

/* ---- login page ---- */
.login,
.link-share-container,
.content-auth,
.no-auth-wrapper {
  background-color: var(--biopunk-bg) !important;
}
.login .card,
.no-auth-wrapper .card {
  background-color: var(--biopunk-surface) !important;
  border: 1px solid var(--biopunk-border) !important;
}

/* logo sizing on auth screens */
.no-auth-wrapper .logo img,
.login .logo img,
img[alt="Vikunja"] {
  max-height: 60px !important;
  width: auto !important;
}

/* ---- headings: Playfair per brand ---- */
h1, h2, h3, .title {
  color: var(--biopunk-text) !important;
}
.no-auth-wrapper h2,
.login h2 {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  color: var(--biopunk-gold) !important;
}

/* ---- misc ---- */
.subtitle, .has-text-grey, small { color: var(--biopunk-muted) !important; }
hr, .divider { background-color: var(--biopunk-border) !important; }
table th { color: var(--biopunk-gold) !important; background: var(--biopunk-alt) !important; }
table td { border-color: var(--biopunk-border) !important; }
.tag { background-color: var(--biopunk-harvest) !important; color: #ffffff !important; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--biopunk-bg); }
::-webkit-scrollbar-thumb { background: var(--biopunk-border-lt); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--biopunk-harvest); }


/* ---- remove Vikunja default mascot + stock hero imagery ----
   Verified selectors via DOM inspection 2026-08-15:
   .no-auth-wrapper carries llama-*.svg as background-image
   section.image carries no-auth-image-*.jpg as background-image */
.no-auth-wrapper {
  background-image: none !important;
  background-color: #0a0907 !important;
}

section.image,
.no-auth-wrapper section.image {
  background-image: linear-gradient(145deg, #14110c 0%, #221d14 45%, #846838 100%) !important;
  background-size: cover !important;
}

section.image h2,
section.image .title {
  font-family: 'Playfair Display', Georgia, serif !important;
  font-style: italic !important;
  color: #EAD191 !important;
}

.offline { background-image: none !important; background-color: #0a0907 !important; }