@layer forms {
    form {
        max-width: 28rem;
        margin-block-end: var(--space-6);
    }

    .fields {
        display: flex;
        flex-direction: column;
        gap: var(--space-5);
    }

    .form-actions {
        display: flex;
        align-items: center;
        gap: var(--space-4);
        margin-block-start: var(--space-6);
    }

    .form-actions button {
        width: 100%;
    }

    label {
        display: block;
        font-size: var(--font-size-sm);
        font-weight: var(--font-weight-medium);
        color: var(--color-text-muted);
        margin-block-end: var(--space-1);
    }

    :is(input, textarea, select) {
        display: block;
        width: 100%;
        padding: var(--space-2) var(--space-3);
        border: var(--border-width) solid var(--color-border-strong);
        border-radius: var(--radius-md);
        background: var(--color-bg);
        color: var(--color-text);
        transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
    }

    :is(input, textarea, select)::placeholder {
        color: var(--color-text-subtle);
    }

    :is(input, textarea, select):hover {
        border-color: var(--color-text-subtle);
    }

    :is(input, textarea, select):focus-visible {
        outline: none;
        border-color: var(--color-accent);
        box-shadow: 0 0 0 3px var(--color-ring);
    }

    :is(input[type="checkbox"], input[type="radio"]) {
        width: auto;
        accent-color: var(--color-accent);
    }
}