.btn {
        display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 20px;
    border: 1px solid currentColor;
    border-radius: 999px;
    font-size: 13px;
    letter-spacing: 0.04em;
    transition:
        background 0.2s,
        color 0.2s;
}

.btn:hover {
        background: currentColor;
    color: var(--bg);
}

.btn-solid {
        background: var(--ink);
    color: var(--paper);
    border-color: var(--ink);
}

.btn-solid:hover {
        background: transparent;
    color: var(--ink);
}

.btn-amber {
        background: var(--accent);
    color: var(--ink);
    border-color: var(--accent);
}

.btn-amber:hover {
        background: transparent;
    color: var(--accent);
}

.btn-ghost-light {
        border-color: rgba(255, 255, 255, 0.4);
    color: var(--paper-on-night);
}

.btn-ghost-light:hover {
        background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.btn-ghost-dark {
    color: var(--ink);
}

.btn-ghost-dark:hover {
        background: var(--ink);
    color: var(--paper);
}