/* ============================================================
   05d — SHARED COMPONENTS: TAGS & PILLS
   Used inside skills, project stacks, and the competencies list.
   ============================================================ */

.tag{
  font-family:var(--mono);
  font-size:0.78rem;
  color:var(--ink-dim);
  border:1px solid var(--line);
  padding:6px 12px;
  border-radius:2px;
  transition: border-color .3s, color .3s, transform .3s;
}
.tag:hover{ color:var(--ink); border-color:var(--gold-dim); transform:translateY(-2px); }

.pill-cloud{ display:flex; flex-wrap:wrap; gap:12px; }
.pill{
  font-family:var(--mono);
  font-size:0.82rem;
  color:var(--ink-dim);
  border:1px solid var(--line);
  padding:10px 18px;
  border-radius:999px;
  transition: all .35s ease;
}
.pill:hover{
  color:var(--bg);
  background:var(--gold);
  border-color:var(--gold);
  transform:translateY(-3px);
}

/* ============================================================
   BUTTON — used for "Download CV" and similar calls to action.
   Two variants: .btn (solid, primary) and .btn-outline (ghost).
   ============================================================ */

.btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:0.8rem;
  letter-spacing:0.04em;
  color: var(--bg);
  background: var(--gold);
  border: 1px solid var(--gold);
  padding: 12px 22px;
  border-radius:2px;
  transition: background .3s, color .3s, border-color .3s, transform .3s;
}
.btn:hover{
  background: transparent;
  color: var(--gold);
  transform: translateY(-2px);
}
.btn svg{ width:14px; height:14px; }

.btn-outline{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--mono);
  font-size:0.8rem;
  letter-spacing:0.04em;
  color: var(--ink-dim);
  background: transparent;
  border: 1px solid var(--line);
  padding: 12px 22px;
  border-radius:2px;
  transition: border-color .3s, color .3s, transform .3s;
}
.btn-outline:hover{
  color: var(--teal);
  border-color: rgba(79,209,197,0.4);
  transform: translateY(-2px);
}
.btn-outline svg{ width:14px; height:14px; }