---
// Eyebrow — the small uppercase monospace label that opens almost every
// section on the guide surface. Single most repeated treatment on the site
// (19+ HTML occurrences) and a signature of the design.
//
// `tone` maps directly to the design-system tokens. Pages inside a `--deep`
// surface (e.g. `.worktrees`) pass `tone="gold"` so the label stays readable
// on the dark background. Chapters pages (drifted palette) use `tone="red"`.
//
// The font stack keeps 'DM Mono' first — when the broken @font-face gets
// fixed, the intended face will render. Today it falls through to the generic
// monospace, which is what the site has been rendering all along.

interface Props {
  /** Short uppercase label, rendered literally. Wrap in markup at the call site
   *  if you need an inline icon or emphasis inside the eyebrow. */
  label: string;
  /** Colour tone. Maps to a token; defaults to the guide-surface accent. */
  tone?: 'accent' | 'gold' | 'red';
  /** Element override. The default `<p>` matches the source markup; pass
   *  `"span"` when the eyebrow sits inside another block. */
  as?: 'p' | 'span' | 'div';
}

const { label, tone = 'accent', as: Tag = 'p' } = Astro.props;
---

<Tag class:list={['eyebrow', `tone-${tone}`]}>{label}</Tag>

<style>
  .eyebrow {
    margin: 0;
    /* UNRESOLVED — this consolidates three drifted legacy declarations and
       matches none of them exactly:
         styles.css              500 10px 'DM Mono', monospace   .1em
         chapters.css            700 11px monospace              .12em
         skills-review/styles.css 700 10px monospace             .1em
       `var(--step-0)` (11px) is task 02's decided token, so the size is
       deliberate. The 600 weight is not — legacy uses 500 and 700, never 600.
       Settle this with the font decision in .agents/context/design-system.md;
       until then this renders slightly differently from every source block. */
    font:
      600 var(--step-0) 'DM Mono',
      monospace;
    letter-spacing: 0.1em;
    text-transform: uppercase;
  }
  .tone-accent {
    color: var(--accent);
  }
  .tone-gold {
    color: var(--gold);
  }
  .tone-red {
    color: var(--red);
  }
</style>
