---
// src/components/AccentBox.astro
const boxColor = '#FF5D01';
---

<div class="box">Accented Box</div>

<style define:vars={{ boxColor }}>
  .box {
    border: 2px solid var(--boxColor);
    color: var(--boxColor);
    padding: 1rem;
  }
</style>

<!--
  Notes:
  - define:vars={{ boxColor }} exposes the frontmatter's boxColor
    value as a real CSS custom property, --boxColor, scoped to this
    component's own rendered output.
  - var(--boxColor) inside the scoped <style> block reads that value
    directly - no inline style attribute and no separate CSS-in-JS
    library needed to bridge a JS value into CSS.
  - Changing boxColor in the frontmatter automatically changes the
    rendered border/text color, since the custom property is
    recomputed at build/render time from that same variable.
-->