.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 48px; padding: 14px 22px; border: 0; border-radius: 10px;
  font: inherit; font-weight: 600; line-height: 1.2; 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: 0 8px 20px -10px var(--color-primary); }
.btn--primary:hover { background: var(--color-primary-hover); transform: translateY(-2px); box-shadow: 0 16px 30px -12px var(--color-primary); }
.btn--accent { background: var(--color-accent); color: var(--color-on-accent); }
.btn--accent:hover { background: var(--color-accent-hover); transform: translateY(-2px); box-shadow: 0 14px 28px -14px var(--color-accent-hover); }
.btn--secondary { background: var(--color-surface); color: var(--color-ink); box-shadow: inset 0 0 0 1.5px var(--color-line); }
.btn--secondary:hover { box-shadow: inset 0 0 0 1.5px var(--color-ink); }
.btn--small { min-height: 40px; padding: 10px 16px; font-size: 16px; }
.btn--large { min-height: 56px; padding: 18px 26px; font-size: 19px; }

.link-arrow {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600; 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%;
  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: 15px; font-weight: 500; cursor: pointer;
  border: 1.5px solid var(--color-line); background: var(--color-surface); color: var(--color-ink);
  border-radius: 999px; padding: 9px 16px; 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: 12px; padding: 4px; gap: 2px; }
.seg button {
  font: inherit; font-size: 16px; font-weight: 600; border: 0; background: transparent; color: var(--color-muted);
  padding: 11px 18px; border-radius: 9px; 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); }
.seg--dark { background: color-mix(in srgb, var(--color-on-dark) 10%, transparent); }
.seg--dark button { color: var(--color-dark-muted); }
.seg--dark button:hover { color: var(--color-on-dark); }

.tag { display: inline-block; font-size: 13px; padding: 4px 10px; border-radius: 999px; background: var(--color-tint); color: var(--color-primary-text); font-weight: 600; }
.tag--accent { background: var(--color-accent-soft); color: var(--color-accent-text); }