.button {
    appearance: none;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 10px 16px;
    font: inherit;
    cursor: pointer;
    transition: transform var(--transition-fast), border-color var(--transition-fast), background var(--transition-fast);
}

.button:hover,
.button:focus-visible {
    border-color: var(--color-primary);
    transform: translateY(-1px);
}

.button-primary {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: #07111d;
    font-weight: 700;
}

.button-secondary {
    background: transparent;
}

.input,
.textarea {
    width: 100%;
    border: 1px solid var(--color-border);
    background: var(--color-surface-2);
    color: var(--color-text);
    border-radius: var(--radius-sm);
    padding: 12px 14px;
    font: inherit;
}

.textarea {
    min-height: 160px;
    resize: vertical;
}