/* Link secondario (TextLink.jsx): sottolineatura gialla 3px con freccia, oppure sottolineato semplice. */
@layer components {
  .text-link {
    --text-link-fg: var(--text-brand);

    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding-bottom: 3px;
    border-bottom: 3px solid var(--link-underline-accent);
    color: var(--text-link-fg);
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;

    &:hover { color: var(--text-link-fg); }
  }

  .text-link--underline {
    padding-bottom: 0;
    border-bottom: 0;
    text-decoration: underline;
    text-underline-offset: 4px;
  }

  .text-link--on-dark { --text-link-fg: var(--text-inverse); }
}