input {
    padding: var(--spacing-sm);
    border-radius: var(--border-radius-lg);
    background-color: var(--sys-color-background-surface);
    color: var(--sys-color-text-primary);
    transition: var(--transition-speed-fast);
    width: 100%;
    border: 1px solid var(--sys-color-border-default);
}

input:focus {
    border: 1px solid var(--sys-color-primary-default);
    outline: none;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--sys-color-primary-default) 10%, transparent);
}

input[type="checkbox"],
input[type="radio"] {
    width: auto;
    margin-right: var(--spacing-xs);
    accent-color: var(--sys-color-primary-default);
}

input[type="submit"] {
    background-color: var(--sys-color-submit-default);
    color: var(--sys-color-submit-text);
}

input[type="submit"]:hover {
    background-color: var(--sys-color-submit-hover);
}