/*
 * Etichette a pillola. .chip = bordo sottile su fondo chiaro.
 * --solid (pieno primario), --on-dark (bordo chiaro su fondo scuro), --accent (evidenza), --glass (su foto, maiuscolo).
 */
@layer components {
  .chip-list { display: flex; flex-wrap: wrap; gap: 8px; }
  .chip {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 8px 16px; border-radius: var(--radius-pill);
    background: var(--color-bg); color: var(--color-ink); box-shadow: inset 0 0 0 1px var(--color-line);
    font-size: 14px; line-height: 1.3; letter-spacing: var(--tracking);
  }
  a.chip:hover, button.chip:hover { box-shadow: inset 0 0 0 1px var(--color-accent); color: var(--color-ink); }
  .chip--solid { background: var(--color-primary); color: var(--color-on-primary); box-shadow: none; }
  a.chip--solid:hover { color: var(--color-on-primary); }
  .chip--on-dark { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.4); }
  a.chip--on-dark:hover { color: #fff; }
  .chip--accent { padding: 5px 12px; background: var(--color-accent); color: var(--color-on-accent); box-shadow: none; font-weight: 600; font-size: 13px; }
  .chip--glass {
    padding: 6px 12px; background: color-mix(in srgb, var(--color-primary-dark) 80%, transparent); color: #fff; box-shadow: none;
    font-weight: 700; font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase;
    -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  }
  .chip--sm { padding: 5px 11px; font-size: 12px; font-weight: 700; }
}