/* ── theme.css – Kitten Clinic brand overrides ────────────────
   Loaded after styles.css.  Re-declares only the CSS custom
   properties that differ from the neutral defaults in styles.css.
   ──────────────────────────────────────────────────────────── */

:root {
  /* Primary teal palette from the KC logo */
  --accent:     #1b7272;
  --accent-dk:  #155858;
  --accent-bg:  #edf7f6;

  /* Warm off-white body background */
  --bg:         #f4f8f8;

  /* Navbar: white card with a teal bottom border */
  --nav-bg:     #ffffff;
  --nav-fg:     #1b7272;
  --nav-hover:  #edf7f6;
  --nav-border: #1b7272;
}

/* ── Dark mode overrides (KC palette) ───────────────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg:         #0e1a1a;
    --surface:    #162020;
    --border:     #283a3a;
    --border-lt:  #1e2e2e;
    --text:       #deeaea;
    --muted:      #789090;
    --accent:     #4ab5b5;
    --accent-dk:  #5dcece;
    --accent-bg:  #122424;
    --nav-bg:     #081414;
    --nav-fg:     #deeaea;
    --nav-hover:  rgba(74,181,181,.12);
    --nav-border: #1b7272;
  }
}
:root[data-theme="dark"] {
  --bg:         #0e1a1a;
  --surface:    #162020;
  --border:     #283a3a;
  --border-lt:  #1e2e2e;
  --text:       #deeaea;
  --muted:      #789090;
  --accent:     #4ab5b5;
  --accent-dk:  #5dcece;
  --accent-bg:  #122424;
  --nav-bg:     #081414;
  --nav-fg:     #deeaea;
  --nav-hover:  rgba(74,181,181,.12);
  --nav-border: #1b7272;
}

/* ── Navbar brand: swap text for KC logo ─────────────────────
   The <a class="brand"> element is kept but its text is hidden;
   the logo is shown via a background image instead.           */
nav.navbar {
  border-bottom-width: 2px;

  & a.brand {
    display: inline-block;
    margin: 6px 3px;
    height: calc(var(--topbar-h) - (2 * 6px));
    width: calc(var(--sidebar-w) - (2 * 3px));
    background: url("../img/kc-logo.png") left center / contain no-repeat;
    color: transparent;          /* hide the "Sindisa" text */
    font-size: 0;
    text-indent: -9999px;
    overflow: hidden;
    transition: filter .2s;
  }

  & .icon {
    color: var(--nav-fg);
    opacity: .8;
  }

  & ul li a {
    color: color-mix(in srgb, var(--nav-fg) 70%, transparent);
    &:hover {
      background: var(--nav-hover);
      color: var(--nav-fg);
    }
  }
}

/* ── Logo: invert to white on dark nav background ────────────── */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) nav.navbar a.brand {
    filter: brightness(0) invert(1);
  }
}
[data-theme="dark"] nav.navbar a.brand {
  filter: brightness(0) invert(1);
}