Exercise 3: define:vars Bound to the Hover State — Possible Solution
====================================================================

<nav class="breadcrumb">
  {breadcrumb.map((crumb) => <a href={`/${crumb.fullPath}`}>{crumb.title}</a>)}
</nav>

<style define:vars={{ accent: '#5eead4' }}>
  .breadcrumb a:hover {
    color: var(--accent);
  }
</style>

CONFIRMATION
------------------------------
With accent changed from the chapter's own '#FF5D01' to '#5eead4',
hovering over a breadcrumb link now shows the new teal color instead
of the original orange - no change was needed anywhere in the CSS
rule itself, only in the frontmatter value define:vars reads from.

WHY THIS WORKS AS AN ANSWER
------------------------------
It correctly changes only the frontmatter's own accent value, and
correctly confirms the rendered hover color updates to match,
demonstrating that define:vars genuinely binds a live JS value into
the CSS custom property rather than just copying a static color once.