.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--measure-xs);
  min-height: 48px; padding: var(--measure-sm) var(--measure-xl); border: 0; border-radius: var(--radius-sm);
  font: inherit; font-weight: var(--weight-semibold); line-height: var(--leading-tight); text-decoration: none; cursor: pointer;
  transition: transform 0.2s, box-shadow 0.25s, background 0.25s, color 0.25s;
}
.btn svg { transition: transform 0.3s var(--ease); flex: none; }
.btn:hover svg { transform: translateX(4px); }
.btn--primary { background: var(--color-primary); color: var(--color-on-primary); box-shadow: var(--shadow-glow); }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-glow-hover); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: var(--shadow-glow-accent); }
.btn--secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: var(--shadow-outline); }
.btn--secondary:hover { box-shadow: var(--shadow-outline-strong); }
.btn--small { min-height: 40px; padding: var(--measure-xs) var(--measure-md); font-size: var(--text-sm); }
.btn--large { min-height: 56px; padding: var(--measure-md) var(--measure-xl); font-size: var(--text-lg); }

.link-arrow {
  display: inline-flex; align-items: center; gap: var(--measure-xs); font-weight: var(--weight-semibold); text-decoration: none; color: var(--color-primary-text);
  background-image: linear-gradient(var(--color-accent), var(--color-accent));
  background-size: 0% 2px; background-repeat: no-repeat; background-position: 0 100%; background-origin: content-box;
  padding-block: 3px; margin-block: -3px;
  transition: background-size 0.35s var(--ease);
}
.link-arrow:hover { background-size: 100% 2px; }
.link-arrow svg { transition: transform 0.3s var(--ease); }
.link-arrow:hover svg { transform: translateX(4px); }

.chip {
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-medium); cursor: pointer;
  border: 1.5px solid var(--color-line); background: var(--color-surface); color: var(--color-ink);
  border-radius: var(--radius-round); padding: var(--measure-xs) var(--measure-md); transition: all 0.25s var(--ease);
}
.chip:hover { border-color: var(--color-ink); transform: translateY(-2px); }
.chip[aria-pressed="true"], .chip:has(input:checked) { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-primary); }
.chip input { position: absolute; opacity: 0; pointer-events: none; }
.chip:has(input:focus-visible) { outline: 3px solid var(--color-accent-text); outline-offset: 3px; }

.seg { display: inline-flex; flex-wrap: wrap; background: var(--color-tint); border-radius: var(--radius-md); padding: var(--measure-2xs); gap: 2px; }
.seg button {
  font: inherit; font-size: var(--text-sm); font-weight: var(--weight-semibold); border: 0; background: transparent; color: var(--color-muted);
  padding: var(--measure-sm) var(--measure-lg); border-radius: var(--radius-sm); cursor: pointer; transition: background 0.25s, color 0.25s;
}
.seg button:hover { color: var(--color-ink); }
.seg button[aria-selected="true"], .seg button[aria-pressed="true"] { background: var(--color-primary); color: var(--color-on-primary); }

.tag { display: inline-block; font-size: var(--text-xs); padding: var(--measure-2xs) var(--measure-sm); border-radius: var(--radius-round); background: var(--color-tint); color: var(--color-primary-text); font-weight: var(--weight-semibold); }
.tag--accent { background: var(--color-accent-soft); color: var(--color-accent-text); }
.tag--small { font-size: var(--text-2xs); }